vueCli安装与使用

一、安装环境。

1. Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
2. 本机环境：win10 v1903 | node v12.14.0 | npm v6.13.4。

二、进行安装。

1. 打开cmd或者PowerShell。
2. 输入<npm -v > 查看npm版本，确认npm已安装。
3. 输入<npm install -g @vue/cli>全局下载安装vueCli。
4. 输入<vue -V>查看vueCli版本，确认vueCli已安装。

三、创建项目。

1. 打开cmd或者PowerShell，进入到项目保存位置。
   例子：D:\vue\new>

2. 输入<vue create 项目名>。
   例子 vue create abcd

3. 选择创建模式
   default(默认模式，只安装babel(js语法编译器，兼容高版本语法) | eslint(代码检测插件))
   Manually select features（自定义模式）。

4. 默认模式等待安装完毕，自定义模式：空格（选中/取消），回车（确认，进行下一步）。
   *Babel(js语法编译器，兼容高版本语法)
   TypeScript(支持TypeScript超集)
   Progressive Web App (PWA) Support（渐进式Web应用程序(PWA)支持）
   *Router（vue的路由功能）
   *Vuex（vue的数据管理仓库）
   *CSS Pre-processors（CSS预处理程序支持，less,scss）
   *Linter / Formatter(代码检测/格式化插件)
   Unit Testing（单元测试插件）
   E2E Testing（E2E测试）

   以上是我的默认配置，下一步。

5. Use history mode for router?（y:使用history路由模式，n：hash路由模式）y

6. Pick a CSS pre-processor(选择css预编译插件) less

7. Pick a linter / formatter config(选择linter / formatter配置) Prettier

8. Pick additional lint features（Lint on save 保存时检查 | Lint and fix on commit 提交时检查）Lint on save

9. Where do you prefer placing config for Babel, ESLint, etc.?（In dedicated config files 配置保存在专用文件 | In package.json 保存在 package.json中）In dedicated config files

10. Save this as a preset for future projects?（把它作为未来项目的预置? y:输入预设名 n:进行安装）

四、 默认指令

1. 进入项目文件根目录（有package.json文件）
2. 运行< npm run serve>本地启动服务器，浏览器输入http://127.0.0.1:8080查看默认项目（默认8080端口）
3. 运行< npm run build>打包项目，静态文件在根目录./dist中，放到web服务器就可以运行了。