脚手架
在简单的项目中,使用 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
会自动修复代码格式错误。
运行项目成功