《vue项目实战语法》由会员分享，可在线阅读，更多相关《vue项目实战语法（9页珍藏版）》请在金锄头文库上搜索。
1、Vue2.0项目实战语法-智能社既然我跳进了前端的坑，就要有耐心，各个击破1、 安装配置依赖1） vue init webpack-simple 项目名称 2） cnpm install3 ) npm run dev4 ) cnpm install vuex vue-router axios -D5 ) cnpm install style-loader css-loader -D 6 ) 需要在webpack.config.js中加入 test: /.css$/, loader: style-loader!css-loader 7 ) 2、 做vue项目流程1） 规划组件结构 （Nav.vu
2、e、Header.vue、Home.vue）2） 编写路由（vue-router）3 ) 编写具体每个组件的功能 3、 项目结构1） 在src中建立components存放组件的文件夹2） assets存放4、 组件篇-comonents1） 在src中建立components存放组件的文件夹2） 在components中建立*.vue文件3 ) 在App.vue中导入*.vue （import NavView from ./components/Nav.vue）4 ) export default components: NavView 5） 在template中显示 5、 路由篇-rout
3、er1） 在需要跳转的地方，加入 to：路由地址，tab是会自动在a标记的上一层生成li，active-class高亮的class设置 首页 2） 在要显示的地方路由切换内容的地方放入，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(m
4、ode: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.vueexport default path:/home, component:Home
5、 , path:/follow, component:Follow , path:/column, component:Column , path:/, redirect:/home /默认跳转到首页 , path:*, redirect:/home /404默认页面 6、 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 ./ac
6、tions export default new Vuex.Store( modules: mutations , /把actions导出去 actions)3） 在main.js加入vuex的代码 import Vue from vueimport App from ./App.vueimport VueRouter from vue-routerimport RouterConfig from ./router.config.jsimport store from ./store/ /默认会找到store文件的index.jsVue.use(VueRouter)const router =
7、 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(hid
8、eHeader) /commit到了mutations里面去了 ,5） 在store中新建一个mutations.js import getters from ./gettersconst state = header:true /以上来是tureconst mutations = showHeader(state) state.header = true , hideHeader(state) state.header = false export default state, mutations, getters6） 在store中新建一个getters.js export default
9、 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里 thi
10、s.$store.dispatch(hideHeader) /发出去之后actions.js接收 else this.$store.dispatch(showHeader) 7、 数据交互篇-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 = axios2） 在Home.vue中加入数据交互代码 export default data() return arrList: , components: BannerView , mounted() /获
