Vue 学习笔记06：Vue脚手架

一、Vue 脚手架安装运行

1. 安装

1. 配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org
2. 全局安装 @vue/cli：npm install -g @vue/cli
   
   重新打开 cmd，输入 vue 验证安装是否完成。
   
3. 切换到要创建项目的目录，然后使用命令创建项目：vue create xxxx。
   我在 vue 学习目录下创建，进入当前目录的终端，输入 vue create 03_vuecli。
   
   跳到了选择 vue 编译版本的界面，选择 vue2，按回车。
   
   然后等待，直到创建完成。
   
4. 运行 HelloWorld
   
   在创建完成提示的下方有两个命令，依次执行。
   
   接下来复制下面的链接查看页面
   

2. 替换文件

脚手架文件结构。

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

1. 将项目中的 Vue 组件全部替换成前面写的 Vue，其他的不替换。
   ====>

2. 更改引用路径
   

3. 运行服务查看页面
   打开终端，输入 npm run server
   
   打开浏览器看一下
   

3. 运行报错

如果运行时抛出下面这个错误

解决方法：关闭语法检查。
打开 vue.config.js ，添加 lintOnSave: false，然后再重新编译。

二、render 函数

1. vue.js 与 vue.runtime.xxx.js 的区别：
   （1）vue.js 是完整版的 Vue，包含：核心功能+模板解析器
   （2）vue.runtime.xxx.js 是运行版的 Vue，只包含：核心功能，没有模板解析器。

2. 因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render 函数接收到 createElement 函数去指定具体内容。

3. 只有创建 vm 时采用 render 函数，写组件时不需要使用，Vue 提供了 template 标签解析器。

import Vue from 'vue'
Vue.config.productionTip = false
new Vue({
    el: '#app',
    render(createElement) {
        return createElement('h1', '你好啊');
    },
})

三、修改默认配置

• 使用 vue inspect > output.js 可以查看 Vue 脚手架的默认配置，但是不能修改。
• 通过修改 vue.config.js 可以对脚手架进行个性化定制，比如关闭语法检查、修改主页文件等。
  
• 每次修改完配置文件后，都要重新编译。
• 配置项见 Vue CLI 官网。

四、ref 属性

• 被用来给元素或子组件注册引用信息（id 的替代者）
• 应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上时组件实例对象（vc)
• 使用方式：
  （1）打标识：<h1 ref="xxx"></h1> 或 <School ref="xxx"></School>
  （2）获取：this.$refs.xxx

<template>
  <div>
    <h2 ref="hello">{{ msg }}</h2>
    <school ref="school" />
    <button @click="showInfo">点我获取信息</button>
  </div>
</template>

<script>
import School from "./components/School.vue";
export default {
  name: "App",
  components: { School },
  data() {
    return {
      msg: "hello",
    };
  },
  methods: {
    showInfo() {
      console.log(this.$refs.hello);
      console.log(this.$refs.school);
    },
  },
};
</script>

五、props 配置

• 功能：让组件接收外部传过来的数据

• 传递数据语法：<Student name="xxx"/>

• 接受数据语法：
  （1）简单方式，只接收：props:['name', 'sex', 'age']
  （2）限制数据类型：
  （3）限制类型、限制必要性、指定默认值：

• 备注：
  props 是只读的，Vue 底层回监测你对 props 的修改，如果进行了修改，就会发出警告。如果一定要修改，就赋值 props 的内容到 data 中，然后修改 data 中的数据。
  

六、mixin 混入

• 功能：可以把多个组件共用的配置提取成一个混入对象
• 使用方法：
  （1）定义混合：
  
  （2）使用混入
  局部混入：mixins:[xxx]
  
  全局混入：Vue.mixin(xxx)
  

七、插件

• 功能：用于增强 Vue
• 本质：包含 install 方法的一个对象，install 的第一个参数是 Vue，第二个以后的参数是插件使用者传递的数据。
• 定义插件
  
• 使用插件：Vue.use()
  

八、样式

1. scoped

• 作用：让样式在局部生效，防止冲突。
• 写法：<style scoped>

2. lang

• 作用：指定样式语言，默认使用 css。
• 如果要使用 less，则 <style lang="less">，且要安装 less 和 less-loader，如果只安装 less-loader 运行时会报找不到 less 模块。

npm i less
npm i less-loader