Vue学习笔记（3）（Vue CLI）_前端vue实习月记vue cli(脚本)-CSDN博客

本文链接：https://blog.csdn.net/lu_xiuyuan/article/details/116922036

Vue2.x学习笔记。原视频教程：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili

Vue CLI

0. 什么是vue-cli

如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

CLI是什么意思?

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
Vue CLI是一个官方发布 vue.js 项目脚手架
使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

1. vue-cli使用

0）前提

Node环境要求8.9以上或更改版本。同时依赖webpack。

1）安装及初始化

安装：

npm install -g @vue/cli

**注意：**上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。

初始化：

Vue CLI2初始化：

vue init webpack my-project
# my-project为项目名称

Vue CLI3初始化：
```
vue create my-project
```

2）启动和发布

npm run dev #启动项目

npm run build #项目打包，dist文件夹即为最终项目

3）Vue CLI2详解

Vue CLI2初始化详解

Vue CLI2目录结构详解

Runtime-Compiler和Runtime-only

简单总结：

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

Runtime-Compiler 和 Runtime-only的区别：

为什么存在这样的差异呢？我们需要先理解Vue应用程序是如何运行起来的，

Vue中的模板如何最终渲染成真实DOM。

Vue程序运行过程：

runtime-compiler渲染过程：

template -> ast -> render -> vDom -> UI

runtime-only渲染过程：（省略编译，性能更高，代码更少）

render -> vDom -> UI

render函数的使用

方式1：

new Vue({
  el: '#app',
  render: h => h('h2', { class: 'he' }, ['hello world']),
});

方式2：（注意不能在runtime-only中使用）

//1.先注册一个组件
const cpn = Vue.component('cpn', {
  template: '<div>我是一个组件,我的名字是：{{name}}</div>',
  data() {
    return {
      name: 'cpn',
    };
  },
});

//2.使用组件
new Vue({
  el: '#app',
  render: h => h(cpn)
})