create by db on 2019-1-10 16:28:10 Recently revised in 2019-3-12 15:59:45
Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！GitHub 地址
查阅网上诸多资料，并结合自己的学习经验，写下这篇Vue3.0学习笔记，现分享给大家，以供参考。
作为一只前端菜鸟，本篇文章旨在记录自己的学习心得，如有不足，还请多多指教，谢谢大家。
前言
Vue-CLI 是 vue 官方团队推出的一款快速开发 vue 项目的构建东西，具有开箱即用并且供给简练的自定义配备等功用。包括三个组件：
- CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）
- CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）
- CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等）
Vue-CLI 3.0 正式版于 2018年8月10号发布，大神尤雨溪表示，Vue CLI 3.0与其他的版本完全不同，它经历了重构，目的是：
- 尽可能减少现代前端工具在配置上的烦恼，尤其是在开发者将多个工具混合使用时；
- 尽可能在工具链中加入最佳实践，并让其成为Vue应用程序的默认实践。
与Vue-CLI 2.0相比，Vue-CLI 3.0发生了很多变化。。。
一言以蔽之，就是让开发更简单！
此笔记旨在帮助Vue小白了解并应用Vue3项目的命令行搭建过程，希望能帮得到大家。
参考文献：
正文
搭建Vue-CLI3.x开发环境
1、更新npm到最新版本
Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本）。
命令运行
npm install -g npm
npm就自动为我们更新到最新版本
更新完成之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，可查看node版本号.
2、安装全局Vue-CLI3.x脚手架
Vue-CLI是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
首先查看我们当前vue版本号，在命令行输入
vue -V
如果出现2.X.X，则说明我们现在安装的Vue-CLI2；
然后我们就需要更新升级了，命令行输入以下命令，回车；
npm i -g @vue/cli
再次查看Vue的版本号3.x.x，则说明更新成功；
命令行创建Vue-CLI3项目
1、通过Vue-CLI3创建一个vue项目
进入你需要创建项目的文件夹，打开命令行。
输入以下命令，回车
vue create test
这里test指的是项目名，该命令执行后会创建一个名为test的目录，也就是我们所搭建的项目。
此处有两个选择：
-
default (babel, eslint)：默认套餐，提供babel和eslint支持 -
Manually select features：自己去选择需要的功能，提供更多的特性选择。比如如果想要支持TypeScript，就应该选择这一项。
可以使用上下方向键来切换选项。如果只需要 babel 和 eslint 支持，那么选择第一项，就完事了，静静等待 vue 初始化项目。
Vue-CLI3 内置支持了8个功能特性，可以多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。
对于每一项的功能，此处做个简单描述：
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试
我选择了 Router，Vuex，CSS Pre-processors，Linter / Formatter
按住enter进入下一步，接下来都是对之前每项选项的更详细的选择。
-
css:选择SCSS/SASS
-
Linter / Formatter:选择prettier
这一步就是要选择配置文件的位置了。对于 Babel 、 PostCSS 等，都可以有自己的配置文件： .babelrc 、 .postcssrc 等等，同时也可以把配置信息放在 package.json 里面。此处出于对编辑器（ Visual Studio Code ）的友好支持（编辑器一般默认会在项目根目录下寻找配置文件），选择把配置文件放在外面，选择 In dedicated config files
补充
Save this as a preset for future projects?:这个就是问要不要把当前的这一系列选项配置保存起来，方便下一次创建项目时复用。选择y。
选完之后， Vue-CLI 就根据前面选择的内容，开始初始化项目了。
最后出现如下代码
🎉 Successfully created project test.
👉 Get started with the following commands:
$ cd test
$ npm run serve
说明已经初始化成功，Vue-CLI3已经将项目搭建完成。
2、进入你的项目文件夹
项目搭建好了，现在就可以进入项目文件夹。
输入以下命令，回车进入新建的项目。
cd test
3、通过npm在项目里安装依赖
因为各个模板之间都是相互依赖的，所以现在我们要安装依赖。
输入以下命令，回车安装依赖
npm install
4、启动项目
一切环境依赖安装准备就绪，我们来测试一下自己新建的vue项目的运行情况。
输入以下命令，回车启动项目
npm run serve
结果会弹出一个浏览器访问地址默认为localhost:8080，如下：
App running at:
- Local: http://localhost:8080/
- Network: http://***.***.***.***:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
在浏览器中打开http://localhost:8080或者Network的地址，就能看到你的项目了
vue ui 图形化界面创建项目
Vue-CLI3.x给我们同样提供了图形化界面,用来管理和创建项目
命令行输入命令
vue ui
然后会自动打浏览器页面：
然后就可以按照页面按钮一步步创建项目了。
项目打包
在开发完项目之后，就应该打包上线了。 Vue-CLI3 也提供了打包的命令，在项目根目录下执行：
npm run build
执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。
实际上，在部署的时候要注意，假设静态服务器的域名是 http://static.baidu.com ，那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的静态资源以此类推。
总结
至此，我们的Vue3.0项目就搭建完成了。万里长征第一步，加油！
如需进一步了解关于vue项目结构的基础知识，请戳Vue小白课（四）——项目结构解析（Vue4.x）
路漫漫其修远兮，与诸君共勉。
后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址
db 的文档库 由 db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。
