Vue2.0项目实战语法

一、安装配置依赖

1） vue init webpack-simple 项目名称

2） cnpm install

3 )  npm run dev

4 )  cnpm install vuex vue-router axios -D

5 )  cnpm install style-loader css-loader -D

6 )  需要在webpack.config.js中加入

{

test: /\.css$/,

loader: 'style-loader!css-loader'

}

7 )

二、做vue项目流程

1） 规划组件结构 （Nav.vue、Header.vue、Home.vue）

2） 编写路由（vue-router）

3 )  编写具体每个组件的功能

 

三、项目结构

1） 在src中建立components存放组件的文件夹

2） assets存放

 

四、组件篇-comonents

1） 在src中建立components存放组件的文件夹

2） 在components中建立*.vue文件

3 )  在App.vue中导入*.vue （import NavView from './components/Nav.vue'）

4 )  export default{

components:{

NavView

}

}

5） 在template中显示

<div id="app">

<NavView></NavView>

</div>

 

五、路由篇-router

1） 在需要跳转的地方，加入<router-link>

to：路由地址，tab是会自动在a标记的上一层生成li，active-class高亮的class设置

<router-link to='/home' tag="li" active-class="active">

<a href="#">首页</a>

</router-link>

2）  在要显示的地方路由切换内容的地方放入，<router-view>

3）  在main.js中引入

import VueRouter from 'vue-router';

import RouterConfig from './router.config.js'  //配置router的参数文件

Vue.use(VueRouter);

new Vue({

el: '#app',

 router,

render: h => h(App)

});

const router = new VueRouter({

mode:'history',

scrollBehavior:() =>({y:0}),  //切换路由的时候，内容都从顶上开始读

 routes:RouterConfig

})

4）  在src中建立一个router.config.js文件

5）  router.config.js完善里面的配置

import Home from './components/Home.vue'

import Follow from './components/Follow.vue'

import Column from './components/Column.vue'

export default[

{

path:'/home',

component:Home

},

{

path:'/follow',

component:Follow

},

{

path:'/column',

component:Column

},{

path:'/',

redirect:'/home'       //默认跳转到首页

},{

path:'*',

redirect:'/home'       //404默认页面

}

]

 

六、vuex状态管理

1） 在src下建立store文件夹 √

2） 在store中建立index.js √

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

import mutations from './mutations'

import actions from './actions'

export default new Vuex.Store({

modules:{

mutations

},

//把actions导出去

actions

})

3） 在main.js加入vuex的代码 √

import Vue from 'vue'

import App from './App.vue'

import VueRouter from 'vue-router'

import RouterConfig from './router.config.js'

import store from './store/'   //默认会找到store文件的index.js

Vue.use(VueRouter)

const router = new VueRouter({

mode:'history',

routes:RouterConfig

})

new Vue({

el: '#app',

router,

store,

render: h => h(App)

})

4） 在store中新建一个actions.js √

export default{

showHeader:({commit})=>{

//需要有types.js,但是这个项目去掉了types.js

commit('showHeader')  //commit到了mutations里面去了

},

hideHeader:({commit})=>{

//需要有types.js,但是这个项目去掉了types.js

commit('hideHeader')  //commit到了mutations里面去了

},

}

5） 在store中新建一个mutations.js √

import getters from './getters'

const state = {

header:true //以上来是ture

}

const mutations = {

showHeader(state){

state.header = true

},

hideHeader(state){

state.header = false

}

}

export default{

state,

mutations,

getters

}

6） 在store中新建一个getters.js √

export default{

headerShow:(state)=>{

return state.header;

}

}

7） 在要触发的地方，加入代码App.vue √

<NavView v-show="'headerShow'"></NavView>

import {mapGetters, matpActions} from 'vuex'

computed:mapGetters([

'headerShow'

]),

8） 在App.vue中的exprot中加入监听路由的变化的代码 √

watch:{

$route(to,from){

if(to.path=='/user-info'){

//通知actions，状态哪个变量应该消失了为false

//需要发起，$store是从main.js里的store来的

//然后需要导出到index.js里

this.$store.dispatch('hideHeader')   //发出去之后actions.js接收

}else{

this.$store.dispatch('showHeader')

}

}

}

 

七、数据交互篇-axios

1 ) 在main.js进入axios

import axios from 'axios'

//关于axios配置

//1.配置发送请求的信息

axios.interceptors.request.use(function (config){

store.dispatch('showLoading')

return config;

},function(error){

return Promise.reject(error)

})

//2.配置请求回来

axios.interceptors.response.use(function (response){

store.dispatch('hideLoading')

return response;

},function(error){

return Promise.reject(error)

})

//把axios对象挂到Vue原型上

Vue.prototype.$http = axios

2） 在Home.vue中加入数据交互代码

export default {

data(){

return{

arrList:[]

}

},

components:{

BannerView

},

mounted(){

//获取数据

this.fetchDate()

},

methods:{

fetchDate(){

var _this = this;

this.$http.get('src/data/index.data').then(function(res){

_this.arrList.push = res.data

}).catch(function(err){

console.log('Home',err)

})

}

}

}

 

八、文章的详情页制作篇

1 ) 在home.vue路由跳转代码中加入

<router-link :to="'/article/'+item.id">

<h2>{{item.title}}</h2>

<p>{{item.detail}}</p>

</router-link>

2）在router.config.js中写上相应的路由配置

{

path:'/article/:id',

component:Article

}

3）在详情页article.vue接收参数，回显数据

data(){

return {

articleData:[ ]

}

},

mounted(){

var reg=/\/article\/(\d+)/;

var id = this.$route.path.match(reg)[1];

this.fetchData(id); //获取路由的id，放出数据交互函数

},

methods:{

fetchData(id){

var _this = this;

this.$http.get('../src/data/article.data').then(function(res){

console.log(res.data[id-1])

}).catch(function(err){

console.log('文章详情页',err)

})

}

}

3）解决data里有html和样式的情况

<p v-html="articleData.content"></p>

4 ) 显示图片

<img :src="articleData.author_face">

5）如何处理时间戳

建立一个文件夹为filters过滤器，在2.0就只能自己写过滤器了

{{articleData.time | normalTime}}

filters:{

normalTime:function(val){

var oDate=new Date();

oDate.setTime(val);

var y=oDate.getFullYear();

var m=oDate.getMonth()+1;

var d=oDate.getDate();

var h=oDate.getHours();

var mm=oDate.getMinutes();

var s=oDate.getSeconds();

return y+'-'+m+'-'+d+' '+h+':'+mm+':'+s;

}

}

因为会有很多的过滤器，所以在filters文件夹下建立一个index.js，和normalTime.js

index.js

import {normalTime} from './normalTime'

module.exports = {

normalTime

}

normalTime.js

export const normalTime=(time) =>{

if(time){

var oDate = new Date();

oDate.setTime(time)

var y =oDate.getFullYear();

var m= oDate.getMonth()+1;

var d = oDate.getDate();

var h = oDate.getHours();

var mm = oDate.getMinutes();

var s = oDate.getSeconds();

return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s;

}

}

在main.js中，全局引入

import filters from './filters'

 

九、过渡动画篇

1 ) 在App.vue中，修改代码

<transition name="slide-down">

<router-view></router-view>

</transition>

2）在css中加入样式

.slide-down-enter-active, .slide-down-leave-active {

transition: all .4s ease;

opacity: .7;

transform: translate3d(0, 6rem, 0);

}

.slide-down-enter, .slide-down-leave-active {

opacity: .1;

transform: translate3d(0, 6rem, 0);

}

 

十、语法篇

1 ) 在style标签中导入其他css    @import './assets/css/index.css'

（目前同一个文件离引入两个css就报错了）

解决他在是在main.js，用require(‘./assets/css/base.css’) 全局引用

2）

 

十一、项目注意与优化

1） 第三方库的js或者是css，最好用link和script在index.html中引入，避免打包的时候太大

2） axios是不能直接use的

3） index.html引入的连接地址需要写绝对路径

<script src="http://localhost:8080/src/assets/js/rem.min.js"></script>

4） 返回按钮的处理

<a href="#" onclick="window.history.go(-1)">返回</a>

5 ) 如何在vue里使用jquery

在main.js中加入 import $ from ‘./jquery.min.js’即可