Vue 学习笔记06：Vue脚手架_iFulling_vue脚手架语法检查

未知 02-07 4651

Vue 学习笔记06：Vue脚手架一、Vue 脚手架安装运行1. 安装2. 替换文件3. 运行报错二、render 函数三、修改默认配置四、ref 属性五、props 配置六、mixin 混入七、插件八、样式1. scoped2. 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