从“心”认识Vue（六）：vue-cli相关_npn6.7 对应vue-cli-CSDN博客

本文链接：https://blog.csdn.net/high32/article/details/113795419

前言

学习vue的时候学完模板语法，上来就开始了脚手架，虽然上手快了点，但是感觉还是少了一点衔接，知识遇到了断层，于是自己就再补了一点，理解起来比较顺畅一些。

在终端下运行：

npm install -g @vue/cli

检查版本：

vue --version

到要新建项目的目录下，地址栏输入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.保存刚才预设到未来的项目吗

在这里插入图片描述

通过入口main.js 文件加载 App.vue 组件页面，然后通过 index.js中定义的路由指定跳转的组件，替换 App.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
    }
})