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

使用vue-cli4 搭建vue项目

1、安装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版本的，须要@后接版本号

2、建立一个vue项目

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

3、预设选项

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？：上面选中的配置是否是要保存起来，做为你未来项目的预设？

4、启动项目

使用vue-cli成功建立了项目以后，首先须要cd到当前项目中，若是此时项目中没有node-modules文件夹，能够先执行npm install，而后运行项目。

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

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

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

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