Vue CLI 入门 node

1、官网
Vue CLI 官网     npm 安装：npm install -g @vue/cli    卸载：npm uninstall @vue/cli -g
Vue 官网
Vue API 官网
Element 官网    npm 安装：npm i element-ui -S
相关引用可参考 Vue 框架 文章，顶部的说

【注意：必须安装Node.js】
Node.js 官网
Node.js 中文网
查看当前的 Node 版本
安装完 Node 之后，打开 “dos 命令行窗口” 输入 “cmd” 回车，输入 node -v 回车

1、前序准备
   # 本地安装 node 和 git
   node 下载地址：https://nodejs.org/zh-cn/
   git 下载地址：https://git-scm.com/download/win

   # 查看 node 版本
   安装完 node 之后，打开【dos 窗口】输入【cmd】回车，输入【node -v】回车

   # 查看原来 node 安装路径
   安装完 node 之后，打开【dos 窗口】输入【cmd】回车，输入【where node】回车

   # 查看 node 所有版本
   安装完 node 之后，打开【dos 窗口】输入【cmd】回车，输入【npm view node versions】回车

   # n模块是专门用来管理nodejs的版本，安装n模块
   打开【dos 窗口】输入【cmd】回车，输入【npm install -g n】回车

   # 更新升级node版本

n // 选取已安装的版本 上下键选择并按回车键确认
n help // 帮助
n ls // 列出所有node版本
n stable // 把当前系统的 Node 更新成最新的 “稳定版本”
n lts // 长期支持版
n latest // 最新版
n 16.14.2 // 指定安装版本
n rm 16.14.2 // 指定删除某个版本
n use xx.xx.x a.js // 制定版本来运行脚本

   # 查看 git 版本
   安装完 git 之后，打开【dos 窗口】输入【cmd】回车，输入【git --version】回车

   # 查看 npm 版本
   npm -v
   # 更新 npm 版本
   npm install -g npm
   npm -g install npm@6.8.0【更新到指定版本】

   # cnpm安装
   npm i -g cnpm
   npm install -g cnpm --registry=http://registry.npm.taobao.org
   npm install -g cnpm --registry=https://registry.npm.taobao.org

   # npm 更新
   npm install -g npm to update
*
*
2、开发
   # 进入项目目录
   打开 Dos 命令窗口，直接输入【盘符+冒号+回车】，如【E:  回车】
   cd E:\vue\vue-element-admin

   #刷新DNS解析缓存
 【开始】【运行】【cmd】【ipconfig/flushdns】

   # 安装依赖
   npm install

   # 可以通过如下操作解决 npm 下载速度慢的问题
   npm install --registry=https://registry.npm.taobao.org

   # 本地开发 启动项目 2.0
   npm run dev

   # 本地开发 启动项目 3.0
   npm run serve

   # 启动完成后会自动打开浏览器访问 http://localhost:9527

3、构建和发布
   # 打包正式环境
   npm run build:prod

   # 打包预发布环境
   npm run build:stage
============================
2、介绍
   【CLI】
   CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。

   【CLI 服务】
   CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

3、安装【关于旧版本】
   Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先
   通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

   【安装（新版本）】
   npm install -g @vue/cli
   或
   yarn global add @vue/cli

   【安装（旧版本 1.x 或 2.x）】
   npm install -g vue-cli
   或
   yarn global add vue-cli*

   【卸载】
   npm uninstall @vue/cli -g

C:\Users\jie\AppData\Roaming\npm\vue -> C:\Users\jie\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\jie\AppData\Roaming\npm

   打开 “dos 命令行窗口” 输入 “cmd” 回车，输入【D:】跳转到D盘根目录，然后输入【CD MyFile\Project\Angular】跳转到项目使用的目录

4、检查版本(3.x)
   vue --version
   vue -V

5、帮助文档（output usage information）
   vue --help
   vue -h, 

6、创建项目
【注意：打开 “dos 命令行窗口” 输入 “cmd” 回车，输入【D:】跳转到D盘根目录，然后输入【CD MyFile\VueProject】跳转到项目使用的目录】
   vue create <project-name>【新版 3.x】  ------->  vue create hello-world
   vue init <template-name> <project-name>【旧版 2.x】

会弹出“配置方式”选择界面
● default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。
● Manually select features 手动选择配置，选择需要功能，提供更多特性选择。比如想要支持 TypeScript ，就应该选择这一项
可以使用 上下方向键 来切换选项，使用 空格键 选择具体的模块，按下 enter 键进入下一步。

提示：【? Use history mode for router? (Requires proper server setup for index fallback in production)】

这里需要选择路由模式，yes 是 history 模式，no 是 hash 模式
新手可以先从 hash 模式入手，不过实际项目通常采用 history 模式

进入项目：$ cd hello-world
启动服务：$ npm run serve / yarn serve   【需要复制粘贴 URL 地址，在浏览器打开...】
打包编译：$ npm run build / yarn build
执行单元测试：$ npm run test / yarn test:unit
vue-router 安装：$ npm install --save vue-router     通过 use 方法加载 路由 插件   Vue.use(Router)
axios 安装：$ npm install axios                                通过 use 方法加载 axios 插件   Vue.use(VueAxios，axios);
vue-axios 安装：$ npm install vue-axios                  通过 use 方法加载 axios 插件   Vue.use(VueAxios，axios);
                            $ npm install --save axios vue-axios
                            import Vue from 'vue'
                            import axios from 'axios'
                            import VueAxios from 'vue-axios'

                            Vue.use(VueAxios, axios)

                            vue-axios 安装
                            axios api
                            参考第 17 项

vuex 安装：$ npm install --save vuex
qs 安装：$ npm install qs    参考第 19 项
element ui 安装：$ npm i element-ui -S       element 官网
Vant 安装：$ npm i vant -S     Vant 官网
Vue-ECharts 安装：$ npm install echarts vue-echarts     vue-echarts 官网  
*
*
*
创建项目【使用图形化界面】
通过 vue ui 命令以图形化界面创建和管理项目
打开 “dos 命令行窗口” 输入 “cmd” 回车，输入 “vue ui” 回车，上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

7、安装全局扩展
   npm install -g @vue/cli-service-global

8、#安装 vux 发版请使用 npm install vux@next
   npm install vux

9、#安装less-loader, vuejs-templates模板默认不安装less less-loader
   npm install less less-loader --save-dev

*、【vue serve】单个 *.vue 文件进行快速原型开发
   vue serve【缺点：它需要安装全局依赖，使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。】
   Usage: serve [options] [entry]

   在“开发”环境模式下零配置为 .js 或 .vue 文件启动一个服务器

   Options:
   -o, --open  打开浏览器
   -c, --copy  将本地 URL 复制到剪切板
   -h, --help  输出用法信息

*、【vue build】单个 *.vue 文件进行快速原型开发
   vue build 
   Usage: build [options] [entry]

   在“生产”环境模式下零配置构建一个 .js 或 .vue 文件

   Options:

   -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值：app)
   -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值：入口文件名)
   -d, --dest <dir>       输出目录 (默认值：dist)
   -h, --help             输出用法信息

*、【npm run dev】
   npm run dev

*、卸载（应该是旧版本卸载方法）
   npm uninstall vue-cli -g
   yarn global remove vue-cli