PPG007 的文档
GitHub (opens new window)

使用 Vue 脚手架

PPG007 ... 2021-12-25 About 4 min

# 使用 Vue 脚手架

# 安装 Vue-CLI 并创建 Hello World

首先需要安装 Node.js (opens new window) 环境。

成功安装 Node.js 后在命令行输入：

npm install -g @vue/cli
1

如果安装过旧版本可以用这个命令卸载：

npm uninstall vue-cli -g
1

如果安装太慢可以使用国内镜像：

npm config set registry https://repo.huaweicloud.com/repository/npm/
npm cache clean -f
npm config set disturl https://repo.huaweicloud.com/nodejs
npm config set sass_binary_site https://repo.huaweicloud.com/node-sass
1
2
3
4

打开 CMD，进入到想要创建项目的文件夹，执行：

vue create [项目名]
#例如：
vue create demo
1
2
3

在可选项中根据实际情况选择 Vue 的版本等选项。

创建结束后得到一个以项目名命名的文件夹，进入到这个文件夹中，执行：

npm run serve
1

成功启动了Hello World项目

# render 函数

main.js 中有这样一行代码：

import Vue from 'vue'
1

默认情况下引入的是 vue.runtime.esm.js，不包含模板解析器，所以 main.js 的Vue实例中不能添加 template 属性，会报错。

使用render可以在这个环境中完成模板渲染：

render(createElement){
    return createElement('h1','Hello Wrold');
}
1
2
3

可以简写成箭头函数：

render:h=>h('h1',Hello World);
1

如果使用组件直接传入组件即可，不需要第二个参数：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8

# 修改默认配置

使用如下命令将现有配置输出到指定文件：

vue inspect > out.js
1

在 package.json 同级目录下创建 vue.config.js，这个文件应该导出一个包含了选项的对象：

module.exports={

}
1
2
3

可选参考项：Vue-CLI配置项 (opens new window)。

示例，关闭保存时语法检查：

module.exports={
    lintOnSave:false
}
1
2
3

如果定义了一个配置项但是没有设置配置值，那么将会报错，而且如果要使配置生效要重新启动：

npm run serve
1

# ref 属性

ref 属性：

  • 用来给元素或子组件注册引用信息(id 的替代者)。
  • 应用在 HTML 标签上获取的是真实 DOM 元素，应用在组件上是组件实例对象(vc)。
  • 获取：vm.$refs.xxx。
<template>
    <div>
        <!-- <Student></Student> -->
        <h2 ref="title">Hello{{msg}}</h2>
        <button v-on:click="showDOM">点我输出上方DOM</button>
        <School></School>
    </div>
</template>

<script>
import School from './components/School'
import Student from './components/Student'
export default {
    name:'App',
    components:{
        School,

    },
    data() {
        return {
            msg:'World'
        }
    },
    methods: {
        showDOM(){
            console.log(this.$refs.title)
        }
    },
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# props 属性

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

# 传递参数

在使用到组件的地方：

<template>
    <div>
        <Student name='PPG' :age='21' sex='male'></Student>
    </div>
</template>
1
2
3
4
5

# 接收参数

方式一：

props:['name','age','sex']
1

方式二：

props:{
    name:String,
    age:Number,
    sex:String
}
1
2
3
4
5

方式三：

props:{
    name:{
        type:String,
        required:true
    },
    age:{
        type:Number,
        default:20
    },
    sex:{
        type:String,
        required:false
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意

props 是只读的，如果进行修改会产生警告，如果确实需要修改，要将 props 中的指定内容在 data 中复制一份，由于 props 优先级较高，所以不会出现字段未定义的错误。

const student=Vue.extend({
    data() {
        return {
            msg:'Hello Vue',
            studentAge:this.age
        }
    },
    props:{
        name:{
            type:String,
            required:true
        },
        age:{
            type:Number,
            default:20
        },
        sex:{
            type:String,
            required:false
        }
    },
    methods:{
        changeAge(){
            this.studentAge++
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# mixin 混入

功能：可以把多个组件共用的配置提取成一个混入对象。

# 定义 mixin

"use strict";
export const mixin={
    methods: {
        showName() {
            alert(this.name)
        }
    }
}
1
2
3
4
5
6
7
8

# 引用 mixin

局部引入，在组件中引用混合，mixins:['xxx','xxx']：

<script>
import Vue from 'vue'
import {mixin} from '@/mixin'
const student = Vue.extend({
  data() {
    return {
      msg: 'Hello Vue',
      name: 'PPG',
      age: 21,
      sex: 'male'
    }
  },
  mixins:[mixin]
});
export default student
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

全局引入，Vue.mixin(xxx)：

import {mixin} from "@/mixin";
Vue.mixin(mixin)
1
2

Tips

如果一个组件内部定义了和混入中定义的相同的 data、method，最后得到的是内部定义的，如果是钩子函数，那么内部和混合中定义的都会保留。

# 插件

功能：用于增强 Vue。

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

使用插件：Vue.use(xxx)。

应用举例：添加全局过滤器、添加全局指令、配置全局混入、在 Vue 的原型对象上定义全局方法。

定义插件：

"use strict";
const plugin1={
    install(vue,a,b){
        console.log("Plugin 1 installed");
        vue.prototype.hello=function () {
            console.log('Vue 全局方法');
            console.log('另外两个参数为',a,b)
        }
    }
}
export {plugin1}
1
2
3
4
5
6
7
8
9
10
11

使用插件：

import {plugin1} from "@/plugins";
Vue.use(plugin1,Date.now(),"hello");
1
2
<template>
  <div class="demo">
    <h2 @click="showName">name:{{ name }}</h2>
    <br>
    <h2>address:{{ address }}</h2>
    <button @click="helloTest()">点我控制台输出</button>
  </div>
</template>

<script>
import Vue from 'vue'
const school = Vue.extend({
  name: 'School',
  data() {
    return {
      name: 'SDUST',
      address: 'QD'
    }
  },
  methods: {
    helloTest() {
      this.hello();
    }
  }
});
export default school
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# scoped 样式

每个组件中定义的 style 属性在编译后会混在一个文件中，如果存在重名 CSS 样式，后引入的组件中的会覆盖之前组件的 CSS，为 style 标签添加 scoped 属性限定样式只在当前组件中可用：

<style scoped>
.demo {
  background-color: orange;
}
</style>
1
2
3
4
5

style 的另一个属性 lang 可以选择 css 或 less 使 Vue 能够解析，如果选择 less 需要安装 less-loader，要注意版本问题。

Edit this page
Last update: December 25, 2021 14:08
Contributors: PPG007

浏览器本地存储