vue-cli使用

2017-09-03

在公司的一个项目中用到vue，但是之前又没有接触过vue，所以是一边学习一边用，总结了在这个项目中用到的知识和一些技巧

安装

安装步骤按照 http://www.jianshu.com/p/1626b8643676 一步一步来就可以了，我当时安装的时候就漏掉了安装 webpack 导致一直安装出错，还有一个小细节就是语法检测规则，这个我安装的时候也忽略掉了，不要安装，结果在写代码的时候报错

文件(目前用到的文件)

Image text
1.index.html展示页面，不需要修改
2.main.js挂载App使用，也不需要修改，默认只引入路由，如果用到vuex也是需要在这个文件中引用
3.App.vue路由渲染的总页面，可以修改全局样式，可以引入自己写的css
4.router目录下的index.js是用来配置路由
5.assets是放静态资源的，比如css、js、image
6.components目录文件是用来放组件的，可以是自己写的，我是把公共的头部header放在这个目录下了
7.page目录文件就是用来放你写的其他页面的vue文件
8.在用到veux时可以增加文件夹store

项目中遇到的问题

一.路由

1.实现路由切换
在index.js中引入各个部分
import Header(一般都是首字母大写) from ‘../components/header’
第一步：写公共的部分，根据我的项目来说，我把公共的头部就是导航条写在header.vue文件中，在导航条底部要用 router-view 标签来渲染其他内容到这个地方，也就是接下来除了导航条的内容你想写的内容在什么地方，就渲染在什么地方。

{
	path:'/',    //默认渲染页面
	redirect: '/chat',   //重定向，这个页面加载为chat页面，如果不这样进去的页面可能只显示头部，没有内容块
	components: Header,  //组件名
	name: '头部'
}

第二步：把导航条切换的各个子页面与导航条实现路由切换，嵌套子路由

{
	path: '/',
	component: Header,
	name: '设置',
	children: [{
		path: '/setting',
		redirect: '/account', //重定向避免刚打开没点击切换页面出现空白页
		component: Setting,
		name: "Setting"
	}]
}

实现路由嵌套后要在页面的元素上添加切换

1
2
3

<router-link :to="{ name: 'Chat', params: {}}">
	<p>内容</p>
<router-link>

如果要嵌套多个路由的话，是类似的道理，在写一层 children

二.小技巧

1.刷新显示某一页，在App.vue文件的export.default中设置

1
2
3

created:function(){
	this.$router.replace('/chat')
}

2.路由激活状态,在路由配置里：linkActiveClass:’active’
3.实现路由切换时样式改变，可以利用一个变量取不同的值来实现，

1	:class="vueConfig.tabType === 1 ? 'tab_item_selected' : '' "

4.实现数据绑定，使用v-model 文本的长度可以直接使用{ {message.length} }
5.可以为一个元素绑定多个事件函数，@click=”click1(),click2()”
6.实现文本超过500就不能输入字符

watch:{
  message() {
      if (this.message.length > 500) {
          this.message = String(this.message).slice(0,500);}
  }
},

message只能在data的第一级
7.使用label绑定input点击会触发两次是因为label和input要写在同一级
8.获取select选择的值给select设置id== xx 值为 xx.value

三.vuex

1.vuex是类似于插件的使用，首先要安装

2.其实就是引入，在main.js中：

1 2	import Vuex from 'vuex'; //vuex引入状态管理 import Store from './store/storeIndex.js'; //vuex引入状态管理

storeIndex.js文件是自己定义的
在storeIndex.js文件中还要引入一次：

1	import Vuex from 'vuex'; //vuex引入状态管理

在storeIndex.js文件中还要引入的就是每次写的模块的store状态管理文件
例如：

1	import config from './modules/config/config'

当然可以把所有的状态都写在一个文件里，这里是因为多人合作，写在不同的文件里比较好维护
引入所有文件后要输入 Vue.use(Vuex);
3.我知道vuex还是因为在网上看到说vuex管理数据比较方便，然后我就开始在网上查找vuex的知识，看了好多遍就是看不懂到底是用来干什么的，也看不懂是如何使用的，每次看的都是迷迷糊糊的，但是没办法啊，还是要看，不然这个项目就进行不下去了。。所以又硬着头皮看了几天，终于有点懂了，虽然不是都明白，但是至少不会拖拉这个项目的进度。

vuex主要就是4个属性 state、getters、actions、mutations

我现在只是清楚 state 和 mutations 两个的用法。
state相当于一个变量的集合，就是把你需要用到的变量放在state下，当然是按照vuex的语法
在vue文件中可以使用：

1	console.log(this.$store.state.config.autojr.pend_count);

直接使用一般是不推荐的，可以使用计算属性：

computed:{
  getJrAuto(){
      return this.$store.state.config.autojr.is_assess;
  }
}

然后直接用getJrAuto即可

getters和actions我还弄明白是怎么使用的

mutations是方法的集合，是你自己定义的发放用来改变state中变量的值，
语法：

1
2
3

changeConfigAuto(state,num){
    state.autojr.is_assess = num;
},

语法是固定的，就是改变autojr.is_assess赋值为num
在vue文件中使用时语法：

1	this.$store.commit('changeConfigAuto',2);