vue脚手架---vue-cli

脚手架

在简单的项目中，使用 Vue.component 来定义全局组件，确实能够得到很好的使用；但当在更复杂的项目中，或者前端完全由 JavaScript 驱动的时候
下面这些缺点将变得非常明显：

• 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
• 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
• 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

但是文件扩展名.vue就能解决上述问题，但是浏览器不认识.vue文件，所以这时我们就需要引用脚手架vue-cli

安装配置环境

但是现在官方文档说明vue-cli处于维护状态

不死心的我还是试了试。虽然报了很多警告。使用口令：

npm install -g @vue/cli

全局安装脚手架vue-cli

安装成功，通过vue -V能够查询到版本信息。

创建项目

vue create test(项目名称)

输入指令之后，就来说配置，这里我选择的是手动配置

这里是选择一些插件，在这我选择插件如下，插件作用也有标识了

选择完一些插件，这是一些其他的选项，蓝色部分就是我选择的内容。

这里是创建项目完成

启动项目

打开该目录下的 package.json文件，使用VSCode打开集成终端，找到该目录下，输入指令
1.npm run serve 会自动启动本地一台服务器，用于运行项目，当修改代码时，浏览器会自动刷新
2.npm run build 用于压缩打包发布环节
3.npm run lint会自动修复代码格式错误。

运行项目成功