从“心”认识Vue(六):vue-cli相关
前言
学习vue的时候学完模板语法,上来就开始了脚手架,虽然上手快了点,但是感觉还是少了一点衔接,知识遇到了断层,于是自己就再补了一点,理解起来比较顺畅一些。
- 上一篇文章:从“心”认识Vue(五):父组件与子组件
一、vue-cli安装
在终端下运行:
npm install -g @vue/cli
检查版本:
vue --version
二、vue-cli初始化项目
到要新建项目的目录下,地址栏输入cmd,回车打开终端:
终端运行:
vue create myapp
自定义配置(空格选中,a全选,i反选):
1.选择vue的版本
2.是否使用class风格的组件语法
3.是否使用babel做转义
4.选择CSS预处理类型
dart-sass与node-sass区别:
- node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass;
dart-sass 是用 drat VM 来编译 sass; - node-sass是自动编译实时的,dart-sass需要保存后才会生效
推荐 dart-sass 性能更好(也是 sass 官方使用的),而且 node-sass 因为国情问题经常装不上
5.选择语法检测规范
6.选择 保存时检查 还是 提交时检查
7.选择配置信息存放位置,单独存放或者并入package.json
8.保存刚才预设到未来的项目吗
三、vue项目目录
四、vue的启动流程
通过入口main.js 文件加载 App.vue 组件页面,然后通过 index.js中定义的路由指定跳转的组件,替换 App.vue中的 标签 ,完成整个页面的显示。
五、其它补充
-
main.js是vue工程的入口,而App.vue是组件的入口。
-
es6语法中一般不用分号,因为开启eslint检查时会报错
-
main.js创建vue实例代码解释:
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
创建vue实例挂载router和store到实例中,使用render函数创建app组件渲染页面,通过.$mount("#app")将实例手动挂载到index.html的app节点下。
以上代码等同于:
import App from './App'
new Vue({
el: '#app',
template: '<App></App>',
components: {
App
}
})