使用vue-cli3/4 搭建vue项目

使用vue-cli4 搭建vue项目

一、安装vue-cli4

1. 查看版本号：命令行中输入vue -V查看一下vue-cli的版本，如果之前安装过2XX版本的vue-cli，卸载后安装新的。
2. 卸载旧版本：npm uninstall vue-cli -g
3. 安装最新版本：npm install -g @vue/cli
4. 安装指定版本：npm install -g @vue/cli@3.11.0，比如安装3.11.0版本的，需要@后接版本号

二、创建一个vue项目

1. 创建位置：我想将整个前端的项目放在code文件夹中，当前文件夹出打开终端即可。
2. 创建项目：命令行输入vue create questionnaire

三、预设选项

1. 创建成功之后会弹出一个预设选项，第一个是默认设置，第二个是手动选择设置，选中第二个后回车。

1. vue-cli提供了一些快速安装的选项，按上下箭头移动，按空格选择，需要的都选择了之后，按Enter。
   我选择了以下的安装（并不是一定按照我的选，选自己项目用的就可以了）。
   

• Babe：一个js编译器，主要是将es6的代码转换为向后兼容的js语法，以便让js更好的运行在旧版本的浏览器或环境中。babel官网，学习更多>
• TypeScript：可以理解为一个严格版的JS。TypeScript官网，学习更多>
• Router：vue的路由管理器。vue-router官网,学习更多>
• Vuex：一个专为vue开发的状态管理模式，用于集中存储组件的状态。vuex官网,学习更多>
• CSS pre-processor：css预处理语言,css本身是写样式的，css预处理语言也是用于编辑样式，最后编译成css文件，css预处理语言扩展了css,增加了变量、函数等功能，让css更简洁，可读性更强，更容易维护，css预处理语言有很多，less、scss等。
• Unit Testing：单元测试，对最小可测试的单元进行的检查和验证。Unit Testing官网，学习更多>
• E2E Testing：端对端测试，通过编写测试用例，自动化模拟用户操作，对功能、流程进行检查和验证。

1. 预设选项选择之后，会根据预设安装的选项，选择更具体的设置
   我的选择如下（并不是一定按照我的选）
   

• Use class-style component syntax：是否使用Class风格的语法（es6的Class）。阮一峰es6的Class讲解，学习更多>
• Use history mode for router?：是否用history模式的路由（路由的hash模式和history模式）
• Pick a CSS pre-processor？：是否选一个CSS预处理语言？（我选了less）
• Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?：你将Babel、PostCSS、ESLint等配置放在哪?
• Save this as a preset for future projects？：上面选中的配置是不是要保存起来，作为你将来项目的预设？

四、启动项目

使用vue-cli成功创建了项目之后，首先需要cd到当前项目中，如果此时项目中没有node-modules文件夹，可以先执行npm install，然后运行项目。

1. cd到当前项目中 cd vue-demo
2. 下载依赖包：npm install
3. 运行项目：npm run serve

##### 五、可视化UI
目前项目就可以正常启动了，但是一个项目根据需求可能还需要安装其他的依赖包，比如需要element UI、axios，写tsx的还要安装vue-tsx.support等，项目的依赖可以在package.json中查看，当然vue还提供了更直观的插件 vue ui 。

1. 命令行中输入vue -V，查看已经安装了vue-cli，如果有版本号，则安装成功。
2. 输入vue ui，此时会在浏览器中新打开一个页面Vue项目管理器。

1. 点击导入，导入已经创建的项目文件夹，导入成功后，可以直观的看到这个项目的依赖、插件和配置等。