vue-cli3.0手把手带你搭建好一个vue项目
文章目录
一、Vue CLI是什么？
Vue CLI 是基于 webpack构建，并带有合理的默认配置； 可以通过项目内的配置文件进行配置； 可以通过插件进行扩展的一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保各种构建工具能够基于智能的默认配置即可平稳衔接。
二、用Vue CLI创建项目
1、全局安装Vue CLI
因为npm是国外的源，下载速度比较慢，我换成了阿里的源，所以使用cnpm命令。
cnpm install -g @vue/cli
若安装成功，则输入vue --version，会有如图显示。
如果想要更新Vue CLI，重新安装即可（会覆盖以前的），这是最有效的方法。
2、创建项目
先cd进将要存放项目的文件夹，执行
vue create 项目名（项目名不能有大写字母）
会进入，按上下键移动可选择安装。
第一个是基于vue2的默认安装最低配置，第二个是基于vue3的默认安装最低配置，安装任意一个就能满足项目的基本需求，第三个是手动自行选择安装配置。
3、选择配置
只有你在上一步选择第三个才会有这一步，按上下键移动，按空格选中。
| Choose Vue version | 选择vue版本 |
|---|---|
| Babel | 将ES6代码转为ES5代码 |
| TypeScript | 是否支持TypeScript |
| Progressive Web App (PWA) Support | 是否支持PWA（谷歌的离线应用） |
| Router | 路由 |
| Vuex | 状态管理 |
| CSS Pre-processors | css预处理 |
| Linter / Formatter | 代码规范工具 |
| Unit Testing | 单元测试 |
| E2E Testing | 端对端测试 |
4、选择Vue的版本
是vue.js2还是vue.js3
5、router是否使用history模式
这里会询问你路由是否使用history模式，建议选择是。
6、选择css预编译语言
这里有两个Sass/Scss，其中dart-sass比node-sass效率更高，下载更方便。
7、选择代码规范工具
| ESLint with error prevention only | 仅错误预防 |
|---|---|
| ESLint + Airbnb config | ESLint+Airbnb配置 |
| ESLint + Standard config | ESLint+标准配置 |
| ESLint + Prettier | ESLint+更漂亮的代码 |
选择安装 ESLint + Standard config
| Lint on save | 每次保存校验 |
|---|---|
| Lint and fix on commit | 提交的时候修复 |
8、选择配置保存方式
| In dedicated config files | 各自专有一个配置文件 |
|---|---|
| In package.json | 都配置在package.json文件中 |
9、是否保存配置信息
询问你是否保存这次项目的配置信息，以便于下一次也用此配置信息快速搭建起一个项目。
项目的搭建到这里就已经完成咯！！！
三、运行项目
cd进项目文件夹，执行
npm run serve
运行成功
Tip： 加油啊，兄弟们！！！