vue——vue-cli(脚手架)

最新推荐文章于 2024-04-19 17:49:16 发布

_摇摇七喜_

最新推荐文章于 2024-04-19 17:49:16 发布

阅读量104

点赞数

分类专栏：学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_46143156/article/details/105185484

版权

10 篇文章 0 订阅

订阅专栏

开发大型项目时，必然需要使用Vue CLI，使用vue-cli可以快速开发环境以及对应的webpack配置。如果只用webpack的话，要配置很多，很繁琐，使用vue-cli后便捷很多。

CLI ：Command-Line Interface，命令行界面，俗称为脚手架
Vue CLI 使用前提 - Node，Webpack
Vue CLI的使用
- 安装
```
npm install -g @vue/cli
```
runtime-compiler 和 runtime-only的区别
- runtime-compiler
  - ```
  import Vue from 'vue'
  import App from './App'
  new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
  })
```
- template传进Vue实例时会解析成抽象语法树(ast)，再编译成render函数，形成虚拟dom树，再渲染成UI，即template -> ast -> render -> vdom -> UI
- runtime-only (比runtime-compiler小6KB)
  - ```
  import Vue from 'vue'
  import App from './App'
  new Vue({
    el: '#app',
    render: h => h(App)
  })
```
- 通过render函数，形成虚拟dom，再渲染成UI，即render -> vdom -> UI ，性能更高，代码量更少
- runtime-only的.vue文件的template是由vue-template-compiler处理
vue实例里的render 的createElement会替换el 挂载的内容
- 普通用法 (‘标签’，{标签的属性}，[’’])
- 传入组件对象
vue-cli 3 与 2 版本的区别
- vue-cli3是基于 webpack4打造，vue-cli2是webpack3
- vue-cli3的设计原则是" 0配置"，移除配置文件根目录的build和config等目录
- vue-cli3提供了vue ui命令，提供了可视化配置，更加人性化
- 移除了static文件夹，新增了public文件夹，并且index.html移动到public中
vue-cli3配置
- 输入vue ui命令启动配置服务器
- 新建vue.comfig.js自定义配置文件

关注