🥯 Vue 2.x 脚手架创建项目

Vue CLI（Command Line Interface 命令行接口工具），Vue 脚手架是 Vue 官方提供的标准化开发工具（平台）；
脚手架文档：Vue CLI (vuejs.org) (opens new window)；

# Vue 脚手架的基本使用

# 使用 Vue 脚手架

第一次使用时，全局安装 @vue/cli：
```
$ npm install -g @vue/cli
```
1
使用时，进入要创建脚手架项目的目录；
创建项目：
```
$ vue create project_name
```
1
选择预设配置版本：
成功创建项目，使用命令运行：
```
 $ cd project_name
 $ npm run serve
```
1
2

⭐️ 预设 Vue 脚手架文件结构：

├── node_modules 包依赖文件文件夹
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源文件夹
│   │   └── logo.png
│   │── component: 存放组件文件夹
│   │   └── HelloWorld.vue 组件示例
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# `render` 函数分析

⭐️ 了解 ** 不同版本的 Vue.js ** ：

vue.js ：完整版本的 Vue，包含核心功能和模版解析器；
vue.runtime.*.js ：运行版本的 Vue，只包含核心功能，无模版解析器；

所以在开发 main.js 中不能使用 template 配置项，使用 render 函数可以接收到 createElement 参数去渲染模版结构内容。

# vue-cli 默认配置分析

Vue 脚手架隐藏了所有 webpack 相关的配置，通过以下命令可以看查看具体的 webpack 配置：

$ vue inspect > output.js

vue.config.js 修改默认配置，对脚手架个性化配置… （了解）

# `ref` 属性分析

ref 是一个特殊的标签属性：

可被用来给元素或者自组件注册引用信息（⭐️ 不直接使用 id ， id 的替代者）；
使用 ref 在 HTML 标签上使用获取的是真实 DOM 元素，应用在组件上获取的是组件的实例对象；
🔗 🌰 02-src-ref 属性：

# `props` 配置分析

props 可以让组件接收外部传送给组件的数据的配置属性：

传递数据语法：⭐️ 在组件标签中： <Demo name="xxx"/> ；

接收数据语法：

第一种写法（仅接受数据）： props:[‘name’]

第二种写法（限制类型）：

 props: {
    name: String,
    age: Number
},

1
2
3
4

第三种写法（限制类型 + 必要性限制 + 指定默认值）：

props: {
  name:{
    type: String, // 类型
    required: true, // 必须
    default: 'defalutName' // 默认值
  },
  age :{
    type: Number,
      required: true,
        default: 99
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

⚠️备注： props 接收数据是只读的，Vue 底层会监测对 props 数据的修改，如果进行了修改就会发出警告，若业务需求确实需要修改，可以复制 props 接收到的数据到 data 中然后再修改。
🔗 🌰 03-src-props配置分析 ：

# `mixin` 混入配置

mixin 可以把多个组件共用的配置提取成一个混入对象:

使用：
- 第一步：定义混入：
```
export const mixinName = {
  data(){....},
  methods:{....}      
  // ....
}
```
1
2
3
4
5
- 第二部：使用混入：
  - 全局混入：在入口文件 main.js 引入混合后，进行全局配置 Vue.mixin(mixinName) ；
- 局部混入：定义 mixins 配置项： mixing:[‘mixinName’] ；
🔗 🌰 04-src-mixin混入配置 ：

# 插件的使用

插件可以增强 Vue 中的功能：

本质：包含 install 方法的一个对象， install 的第一个参数是 Vue ，第二个以后的参数是插件使用者传递的数据；

使用：

第一步：定义插件：

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

第二步：使用插件：

在入口文件 main.js 引入插件后，配置 Vue.use(pluginName)

🔗 🌰 05-src-plugin插件的使用 ：

# `scoped` 局部样式

scoped 使样式在局部生效，防止发生冲突；

使用格式： <style scoped> </style> ；

另外， lang 属性可以选择 CSS 预编译处理器，例如使用 lang=“less” ，默认为 css ;

🔗 🌰 06-src-scoped局部样式 ：

# `$nextTick`

使用语法： this.$nextTick(function() { … })
作用：在下一次 DOM 更新结束后执行其指定的回调函数。
一般在改变了数据之后，要基于更新的新 DOM 进行某些操作时，可以定义在 $nextTick() 的回调函数中执行。

模版渲染更新原则，Vue 不会在某个回调函数中，监测到某个数值更新后变重新渲染模版，而是等所有的数值更新后才重新渲染模版，以提高效率。

编辑

#Vue

📢 上次更新: 2022/09/02, 10:18:16

← 🥮 template 模版元素 🪝 Vue 3 + TypeScript 项目搭建→

🥯 Vue 2.x 脚手架创建项目

# Vue 脚手架的基本使用

# 使用 Vue 脚手架

# render 函数分析

# vue-cli 默认配置分析

# ref 属性分析

# props 配置分析

# mixin 混入配置