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>

五、路由篇-router

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

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

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

</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 √

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和样式的情况

4 ) 显示图片

5）如何处理时间戳

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

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中，修改代码

<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引入的连接地址需要写绝对路径

4）返回按钮的处理

5 ) 如何在vue里使用jquery

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