vue项目职责_vue项目总结，所用到的技术点

1.用到的技术点

vue 是一个渐进式JavaScript框架 npm install vue

vue-route 是一个路由匹配功能 npm install vue-router

vue-resource 发送ajax请求的 npm install vue-resource

vue-preview 图片预览插件 npm i vue-preview -S

vuex 组件传值 npm install vuex --save

mint-ui 基于vue的移动端组件 npm i mint-ui -S

mui 最接近原生的前端框架

2.  template.html  是整个主页面，最终所有的js和css和html都会匹配到这里的

1.只需要定义一个ID容器  

Vue项目

@media only screen and (width:320px){

html{

font-size:16px;

}

}

@media only screen and (width:360px){

html{

font-size:18px;

}

}

@media only screen and (width:414px){

html{

font-size:20px;

}

}

body{

margin: 0px;

padding: 0px;

}

2.  main.js   是一个主模块集成了所有的第三方包和css文件和js文件和路由匹配

1.引入第三方包，使用import关键字，基于vue的必须集成到vue中以 Vue.use() 方法

2.导入项目中所需要的css

3.让app.vue给用户显示的第一个组件

1.首先app.vue引入到mian.js中　　import App from './App.vue'

2.在Vue实例中定义render函数,变量名需要一致

render:function(createElement){ //项目一启动之后，呈现给用户的第一个组件

return createElement(App)

}

4.设置全局过滤器  Vue.filter()

5.路由整个步骤

1.导入需要设置路由的组件

import home from './components/home/home.vue'

import category from './components/category/category.vue'

2.设置路由规则 new VueRouter实例

{path:'/home',component:home}，来进行路由匹配，需要跟go属性一致

{path:'/',redirect:'/home'} 来进行默认路由匹配

const router = new VueRouter({

routes:[

{path:'/',redirect:'/home'},

{path:'/home',component:home},

{path:'/category',component:category},

{name:"pictureAndTextIntruduction",path:"/goods/pictureAndTextIntruduction",component:pictureAndTextIntruduction},

{path:"/goods/goodscomment",component:goodscomment}

]

})