本章主要探究vue-cli的基础概念,vue-cli是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。

本文要点:

1.vue-cli的安装部署
2.vue-cli补充点

1.vue-cli安装教程

介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件:

CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令)

CLI服务:@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上(提供 如:serve、build 和 inspect 命令)

CLI 插件:给Vue 项目提供可选功能的 npm 包 (如: Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等)

安装

  1. 全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步:
1
npm uninstall vue-cli -g //或者 yarn global remove vue-cli
  1. Vue CLI 3或4 的安装需要 nodeJs (推荐使用较新的版本)
1
2
3
4
5
6
7
8
9
【命令行查看版本号】
node -v
npm -v

【升级npm(可选操作)】
npm install -g npm

【修改为淘宝镜像(可选操作)】
npm config set registry "https://registry.npm.taobao.org"
  1. 安装@vue/cli(Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli)
1
2
npm install -g @vue/cli 
yarn global add @vue/cli
  1. 检查vue版本

vue -V

使用

vue create 搭建新项目

↑/↓键表示移动,Space键表示选中

vue ui 图形化界面操作

2.vue-cli补充点

1.关于VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property ‘xxxx’ of undefined 的解决办法

data在里面做了定义

1
2
3
4
5
6
7
8
9
<script>
export default {
data(){
return {
info:{name:""}
}
}
}
</script>

在方法里面进行赋值

用 this.info = repos.data 数据可以请求到,但是会报错 TypeError: Cannot set property ‘listgroup’ of undefined

  • 主要原因是:在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定在then的内部,console.log(this),输出undefined

  • 解决办法:

在请求axios外面定义一下 let vm = this
内部用:vm.info = response.data

2.Vue中使用v-for给img中的src属性赋值

在学习Vue的时候,使用v-for获取Vue data中的数据

1
2
3
4
5
6
<!--img标签中src属性使用{{}}获取,报错。-->
<div id="app">
<div v-for="book in list">
<img src="{{book.bookImg}}"> //并不会读取到
</div>
</div>

错误之处在于:
属性值数据绑定应该用v-bind,应该写成v-bind:src=””或者:src=””

1
2
3
4
5
<div id="app">
<div v-for="book in list">
<img v-bind:src="book.bookImg"> //ok
</div>
</div>

3.vue-cli引入assets下图片路径找不到问题:

1
2
3
4
5
6
<img :src="imgsrc2">
export default{
data(){
imgsrc2: require('../assets/logo4.png')
}
}

4.vue如何获取并操作DOM元素

在之前,我们使用js操作DOM元素:直接给相应的元素加id,然后再document.getElementById(“id”);获取,然后设置相应属性或样式

但在vue中,要在mounted中使用,因为只有在执行mounted的时候,vue已经渲染了dom节点,这个时候是可以获取dom节点的,vue中尽量不去操作dom元素,选用ref操作属性获取

1
2
3
<button ref="btn">获取ref</button>

this.$refs.btn.style.backgroundColor="#ff0000"

此时再去调试时,又会出现大致意思是说不能设置属性背景颜色,因为它没有定义错误

  • $refs获取当前点击元素

分析:根据this.$refs.list.style.bottom = bottom可以知道本意是想获取子组件的DOM根元素,然后对这个元素的css属性bottom设置一个值,但是由于this.$refs.list只是获取到组件,并不能获取到子组件里面的DOM,这就是出错的原因

解决方法:通过$el选项获取到子组件的DOM,也就是改写成:this.$refs.list.$el.style.bottom = bottom,即this.$refs.list.$el可以获取到子组件的DOM

  • $event.target
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1. 先设置函数<button @click="getInfo($event)">测试</button>

get_info:function(el){
// 获取当前点击元素的属性值
// let a = parseInt(el.target.dataset.item);
let a = parseInt(el.target.getAttribute("data-item"));

let b = (this.chapter_arr[a]["images_url"]).split("'");
if(b.length<=1){
this.rows = JSON.parse(this.chapter_arr[a]["images_url"]);
}else{
let arr = [];
for (let index = 1; index < b.length; index+=2){
// 由于数据库数据结构设置错误,导致无法使用json
arr.push(b[index]);
}
this.rows = arr;
}
}
  • el.target.dataset

这种el.target.dataset获取自定义的属性值,比如设置的data-url值,而且设置自定义的属性值的规范写法必须是 data-XXXX, 获取自定义的属性值的规范写法必须是 el.target.dataset.XXXX

5.vue-cli的axios解决跨域问题

在主目录的vue.config.js文件中,写入如下内容:

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
module.exports = {
// publicPath: './' // 编译时使用
publicPath: '/', // 这个是在测试路由为‘history’时,动态参数匹配params模式时才会使用
devServer: {
// port: 8000, // 配置开发环境运行端口号,不配置时,系统自动使用默认端口号
// proxy配置代理,解决跨域请求后台数据的问题
proxy: {
'/migu':{
target: 'https://m.music.migu.cn/', // target host
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/migu': '' // rewrite path
}
},
'QQmusic':{
target: 'https://baidu.com/',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/migu': ''
}
}
}
}
}

参考文章


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议