Vue 学习笔记06：Vue脚手架
- 一、Vue 脚手架安装运行
- 1. 安装
- 2. 替换文件
- 3. 运行报错
- 二、render 函数
- 三、修改默认配置
- 四、ref 属性
- 五、props 配置
- 六、mixin 混入
- 七、插件
- 八、样式
- 1. scoped
- 2. lang
一、Vue 脚手架安装运行
1. 安装
- 配置 npm 淘宝镜像：
npm config set registry https://registry.npm.taobao.org - 全局安装 @vue/cli：
npm install -g @vue/cli - 重新打开 cmd，输入 vue 验证安装是否完成。
- 切换到要创建项目的目录，然后使用命令创建项目：
vue create xxxx。
我在 vue 学习目录下创建，进入当前目录的终端，输入vue create 03_vuecli。
跳到了选择 vue 编译版本的界面，选择 vue2，按回车。
然后等待，直到创建完成。 - 运行 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：运行配置文件- 将项目中的 Vue 组件全部替换成前面写的 Vue，其他的不替换。
- ====>
- 更改引用路径
- 运行服务查看页面
打开终端，输入npm run server - 打开浏览器看一下
3. 运行报错
如果运行时抛出下面这个错误
解决方法：关闭语法检查。
打开 vue.config.js ，添加 lintOnSave: false，然后再重新编译。
二、render 函数
- vue.js 与 vue.runtime.xxx.js 的区别：
（1）vue.js 是完整版的 Vue，包含：核心功能+模板解析器
（2）vue.runtime.xxx.js 是运行版的 Vue，只包含：核心功能，没有模板解析器。 - 因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render 函数接收到 createElement 函数去指定具体内容。
- 只有创建 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
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
