1、别名配置
在build文件夹下面的webpack.base.conf.js文件里面可以配置别名来简单明了的引入各种组件
1
2
3
4
5
6
7
8
| resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'src': resolve('src'),
'common': resolve('src/common'),
'components': resolve('src/components'),
}
},
|
配置完的demo如下:
1
| import mheader from 'components/m-header/m-header'
|
2、在手机上打开vue项目
首先需要手机和电脑在同一个wifi下，然后win+r输入cmd，输入命令‘ipconfig’获取到本机的ip地址后，在vue里面的package.json修改配置
1
2
3
4
5
6
| "scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.1.3", //ip写在这里
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
|
3、路由配置
首先在项目router文件夹下面的index.js里面引入组件
1
2
3
4
5
| import Vue from 'vue'
import Router from 'vue-router'
import recommend from 'components/recommend/recommend'
import rank from 'components/rank/rank'
import search from 'components/search/search'
|
然后在下面的export default里面配置组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| export default new Router({
routes: [
{
path:'/',
redirect:'/recommend'
},
{
path: '/recommend',
component: recommend
},
{
path: '/rank',
component: rank
},
{
path: '/search',
component: search
}
]
})
|
在导航栏的组件里面写路径的组件时应该这样写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div class="tab">
<router-link tag='div' to='/recommend' class='tab_item'>
<span class="tab_link">推荐</span>
</router-link>
<router-link tag='div' to='/rank' class='tab_item'>
<span class="tab_link">排行榜</span>
</router-link>
<router-link tag='div' to='/search' class='tab_item'>
<span class="tab_link">搜索</span>
</router-link>
</div>
|
在App.vue里面引入tab时记得加上路由出口
1
2
3
4
5
6
7
8
9
| <template>
<div id="app">
<mheader></mheader>
<tab></tab>
<router-view></router-view>
</div>
</template>
|
4、vue里面使用normalize.css
1
2
3
4
| 首先安装 npm i normalize.css --save-dev
然后在main.ja里面引入 import 'normalize.css'
如果报错的话就安装 npm install css-loader style-loader
|
5、vue打包前需要做的事
1
| 找到config里的index.js,打开修改assetsPublicPath 为“./”
|
6、配置子路由
例如点击列表页面跳到详情页这样的操作时就需要配置子路由
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
| {
path:'/singer',
component:singer, //这样父路由
children:[
{
path:':id',
component:singerDetail //这是子路由
}
]
}
在router里面的index.js配置完路由后来到父路由组件
<template>
<div class="singer">
//此处写父路由的页面
<ul>
<li @click='select(item)' v-for='item in items'>这是列表demo</li>
</ul>
<router-view></router-view> //给子路由一个router-view
</div>
</template>
然后在methods里面写个select方法
select(item){
this.$router.push({
path:`/singer/${item.id}`
});
},
|
7、vue里面的页面跳转
1
2
3
4
5
6
| 如果是直接写在template里面的话
<li @click="$router.push(`/entry/gcodeView?id=${scope.row.id}`)">跳转</li> //问号后面可以带参数
写在script里面
this.$router.push(`/entry/gcodeView?id=${data.gcode_id}`);
|
8、vue里面设置404页面
1
2
3
4
5
6
7
| {
path: '/*',
name: 'noMatch',
component: noMatch
}
|
9、获取vue路由及去除参数
1
2
3
4
5
6
| this.$route.path;
//可以不带参数的路由，例：http://localhost:8080/entry/errorMessage?machine_id=3 ，输出为/entry/errorMessage
this.$router.replace(this.$route.path);
//去除路由后面的参数,例：http://localhost:8080/entry/errorMessage?machine_id=3 输出为http://localhost:8080/entry/errorMessage
|
10、触发dom的点击事件
1
2
3
| <button ref='btn'></button>
this.$refs.btn.click();
|
11、多个子路由的情况下，配置默认路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| {
path: '/index',
component: index,
meta: [],
redirect: '/home',
children: [
{
path: '/home',
component: resolve => require(['@/pages/home/home'], resolve)
},
{
path: '/test',
component: resolve => require(['@/components/test/test'], resolve),
meta: ['添加数据test']
}
]
},
|
12、watch对象或者数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| data(){
return{
obj:{
a:1,
b:2
}
}
},
watch: {
obj: {
handler(val) {
console.log(val)
},
deep: true,
immediate: true
}
},
|
13、动态style
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <template>
<img :style='imgStyle'>
</template>
<script>
computed:{
imgStyle() {
const { scale, deg, enableTransition } = this.transform;
const style = {
transform: `scale(${scale}) rotate(${deg}deg)`,
transition: enableTransition ? "transform 0.3s ease 0s" : ""
};
return style;
}
}
</script>
|
14、 动态class
1
2
3
4
5
6
7
8
9
10
11
| // 第一种写法,bgImage和bgColor都是变量
<div :class="[bgImage!== '' ? 'none-bg text-white bg-img' : '' , bgColor]"></div>
// 第二种
<div :class="['flex', 'text-center', roleMenuType]"></div>
// 第三种
<div :class="roleMenuType"></div>
// 第四种，当前遍历dom的索引与active状态的索引一致时加上'active' class
<div :class="{active:currentIndex === index}"></div>
|
15、全局组件
一般我们使用组件都是先写好组件，在我们需要使用组件的地方，引入之前写好的组件，并通过components绑定，就可以直接使用了。
但是如果一个组件需要使用的地方很多，那么就可以写成全局组件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
import Vue from 'vue'
import App from './App'
import store from './store'
import navBar from "./components/navBar";
Vue.config.productionTip = false;
Vue.prototype.$store = store;
Vue.component('navBar', navBar);
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
|
16、 如何自定义指令
vue里面如何自定义指令
17、 给data中一个对象新增属性，更新视图
1
2
|
this.$set(this.obj, 'a', '呆呆');
|
18、在vue2中是无法检测到根据索引值修改的数据变动的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <script>
var app = new Vue({
el: '#app',
data: {
arr: [1, 2, 3]
},
methods: {
handleClick() {
const _arr = [...this.arr];
_arr[1] = 666;
this.arr = _arr;
}
}
})
|
19、computed 计算属性还内置了缓存功能，如果依赖数据没变化，多次使用计算属性会直接返回缓存结果，同我们直接写在模板里相比，性能也有了提升。