5.Vue-cli

vue cli 简介

Vue CLI是一个官方发布 vue.js 项目脚手架。使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。

认识vue cli3

vue-cli 3 是基于 webpack 4 打造,设计原则是“0配置”,移除的配置文件根目录下的build和config等目录。vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化。移除了static文件夹,新增了public文件夹,并且index.html移动到public中。
安装Vue脚手架

npm install -g @vue/cli

Vue CLI3初始化项目

vue create my-project

5.Vue-cli_第1张图片
运行

cnpm run serve

编译

cnpm run build

目录结构详解

5.Vue-cli_第2张图片

ui配置

Vue的版本和vue-template-compiler的版本永远是一一对应的。默认使用runtime-only
5.Vue-cli_第3张图片

自己配置

新建文件:vue.config.js(文件名必须是这个)

相关问题

Runtime-Compiler 和 Runtime-only 的区别

简单总结
如果在之后的开发中,你依然使用template,就需要选择Runtime-Compiler
如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only
选择runtime.png

runtime-compiler
new Vue({
  el: '#app',
  components:{ APP },
  template:''
})
runtime-only
new Vue({
  el: '#app',
  render: h => h(App)
})

深入分析
Vue程序运行过程

runtime-compiler(v1)
template -> ast -> render -> vdom -> UI
runtime-only(v2)(1.性能更高 2.下面的代码量更少)
render -> vdom -> UI

5.Vue-cli_第4张图片

你可能感兴趣的:(vue.js,前端)