vue项目实战语法

1Vue2.0项目实战语法-智能社既然我跳进了前端的坑，就要有耐心，各个击破一、安装配置依赖1）vueinitwebpack-simple项目名称2）cnpminstall3)npmrundev4)cnpminstallvuexvue-routeraxios-D5)cnpminstallstyle-loadercss-loader-D6)需要在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存放四、组件篇-comonents1）在src中建立components存放组件的文件夹2）在components中建立*.vue文件3)在App.vue中导入*.vue（importNavViewfrom'./components/Nav.vue'）4)exportdefault{components:{NavView2}}5）在template中显示divid=appNavView/NavView/div五、路由篇-router1）在需要跳转的地方，加入router-linkto：路由地址，tab是会自动在a标记的上一层生成li，active-class高亮的class设置router-linkto='/home'tag=liactive-class=activeahref=#首页/a/router-link2）在要显示的地方路由切换内容的地方放入，router-view3）在main.js中引入importVueRouterfrom'vue-router';importRouterConfigfrom'./router.config.js'//配置router的参数文件Vue.use(VueRouter);newVue({el:'#app',router,render:h=h(App)});constrouter=newVueRouter({mode:'history',scrollBehavior:()=({y:0}),//切换路由的时候，内容都从顶上开始读routes:RouterConfig})4）在src中建立一个router.config.js文件5）router.config.js完善里面的配置importHomefrom'./components/Home.vue'importFollowfrom'./components/Follow.vue'importColumnfrom'./components/Column.vue'exportdefault[{path:'/home',component:Home},{path:'/follow',component:Follow3},{path:'/column',component:Column},{path:'/',redirect:'/home'//默认跳转到首页},{path:'*',redirect:'/home'//404默认页面}]六、vuex状态管理1）在src下建立store文件夹√2）在store中建立index.js√importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)importmutationsfrom'./mutations'importactionsfrom'./actions'exportdefaultnewVuex.Store({modules:{mutations},//把actions导出去actions})3）在main.js加入vuex的代码√importVuefrom'vue'importAppfrom'./App.vue'importVueRouterfrom'vue-router'importRouterConfigfrom'./router.config.js'importstorefrom'./store/'//默认会找到store文件的index.jsVue.use(VueRouter)constrouter=newVueRouter({mode:'history',routes:RouterConfig})4newVue({el:'#app',router,store,render:h=h(App)})4）在store中新建一个actions.js√exportdefault{showHeader:({commit})={//需要有types.js,但是这个项目去掉了types.jscommit('showHeader')//commit到了mutations里面去了},hideHeader:({commit})={//需要有types.js,但是这个项目去掉了types.jscommit('hideHeader')//commit到了mutations里面去了},}5）在store中新建一个mutations.js√importgettersfrom'./getters'conststate={header:true//以上来是ture}constmutations={showHeader(state){state.header=true},hideHeader(state){state.header=false}}exportdefault{state,mutations,getters}6）在store中新建一个getters.js√exportdefault{headerShow:(state)={returnstate.header;}}7）在要触发的地方，加入代码App.vue√NavViewv-show='headerShow'/NavView5import{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')}}}七、数据交互篇-axios1)在main.js进入axiosimportaxiosfrom'axios'//关于axios配置//1.配置发送请求的信息axios.interceptors.request.use(function(config){store.dispatch('showLoading')returnconfig;},function(error){returnPromise.reject(error)})//2.配置请求回来axios.interceptors.response.use(function(response){store.dispatch('hideLoading')returnresponse;},function(error){returnPromise.reject(error)})//把axios对象挂到Vue原型上Vue.prototype.$http=axios2）在Home.vue中加入数据交互代码6exportdefault{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.idh2{{item.title}}/h2p{{item.detail}}/p/router-link2）在router.config.js中写上相应的路由配置{path:'/article/:id',component:Article}3）在详情页article.vue接收参数，回显数据data(){return{articleData:[]}7},mounted(){varreg=/\/article\/(\d+)/;varid=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和样式的情况pv-html=articleData.content/p4)显示图片img:src=articleData.author_face5）如何处理时间戳建立一个文件夹为filters过滤器，在2.0就只能自己写过滤器了{{articleData.time|normalTime}}filters:{normalTime:function(val){varoDate=newDate();oDate.setTime(val);vary=oDate.getFullYear();varm=oDate.getMonth()+1;vard=oDate.getDate();varh=oDate.getHours();varmm=oDate.getMinutes();vars=oDate.getSeconds();returny+'-'+m+'-'+d+''+h+':'+mm+':'+s;}}因为会有很多的过滤器，所以在filters文件夹下建立一个index.js，和normalTime.jsindex.jsimport{normalTime}from'./normalTime'module.exports={normalTime}normalTime.jsexportconstnormalTime=(time)={8if(time){varoDate=newDate();oDate.setTime(time)vary=oDate.getFullYear();varm=oDate.getMonth()+1;vard=oDate.getDate();varh=oDate.getHours();varmm=oDate.getMinutes();vars=oDate.getSeconds();returny+'-'+m+'-'+d+''+h+':'+mm+':'+s;}}在main.js中，全局引入importfiltersfrom'./filters'九、过渡动画篇1)在App.vue中，修改代码tra