基于vue/cli3.0+脚手架搭建Vue项目(01)
文章目录
前言
过好每一天
一、Vue CLI是什么？
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
二、使用步骤
1.安装node.js（http://nodejs.cn/）
2.安装vue/cli3.0+脚手架
执行命令：npm install -g @vue/cli // 3.x+版本 推荐这个，带可视化创建项目vue ui即可启动
3.搭建新项目
可以通过 vue create 快速搭建一个新项目，也可以通过 vue ui 通过一套图形化界面管理你的所有项目。
使用vue create （tip：项目名小写）：
)
可以手动选择需要的插件包Babel和Linter/Formatter，当然你也可以直接选择Vue 2，之后Vue 3会写在新的篇章与君共勉
EsLint+Prettier是规范我们代码和格式化的插件，用多了才会知道它的好
lint on save
代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。如果出现了语法错误，会直接在页面上显示 error
lint and fix on commit
代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候，通过 githook，在 pre-commit 阶段执行 lint 和 fix 操作，自动帮我们把有语法错误的地方修改为符合规范
这里我们选择lint on save保存时校验
选择生成独立配置文件In dedicated config files
设置成自己项目的预设模板
最后生成项目目录：
启动项目：npm run serve
使用vue ui (tip: 图形化界面选择同上)：
总结
不积跬步无以至千里
