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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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容器  <div id="app"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue项目</title>
    <!-- 我是一个好人 -->
    <style>
        @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;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>

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实例　　
　　　
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}
　　　　　　　　]
　　　　　　})
　　　　3.把路由匹配规则放到跟实例 new Vue({})的router中，就实现整个路由匹配功能了

new Vue({
　　　router:router
})　　　
6.vuex的使用步骤
　　1.新建一个空仓库 var store = new Vuex.Store()
　　　　仓库里有四个对象
　　　　state　　存储数据的地方
　　　　getters    获取数据的地方
　　　　mutations    同步更新数据
　　　　actions    异步更新数据
　　2.把仓库的东西放到跟实例中，变量名需一致
new Vue({
　　　store:store
})　　　
　　　　　
//导入我们的第三方包
import Vue from ‘vue‘ //es5 ===> var vue = require(‘vue‘)
import Mint from ‘mint-ui‘
import VueRouter from ‘vue-router‘
import VueResource from ‘vue-resource‘
import moment from ‘moment‘
import VuePreview from ‘vue-preview‘
import axios from ‘axios‘
import Vuex from ‘vuex‘

//集成到Vue中
Vue.use(Mint)
Vue.use(VueRouter) // vue.$route vue.$router
Vue.use(VueResource) //vue.$http...
Vue.use(VuePreview)
Vue.use(Vuex) //$store

Vue.prototype.$axios = axios

//导入项目中需要用到的css
import ‘mint-ui/lib/style.min.css‘
import ‘./statics/mui/css/mui.min.css‘
import ‘./statics/css/common.css‘ //自己写的样式，放在最好


//导入我们要渲染的根组件这个模块
import App from ‘./App.vue‘

//全局过滤器
Vue.filter(‘dateFmt‘,(input,formatString)=>{
    const lastFormatString = formatString || ‘YYYY-MM-DD HH:mm:ss‘

    /**
     * 参数1：格式化的原始时间
     * 参数2：格式化的字符串
     */
    return moment(input).format(lastFormatString)
})


//导入需要设置路由规则的组件
import home from ‘./components/home/home.vue‘
import category from ‘./components/category/category.vue‘
import shopcart from ‘./components/shopcart/shopcart.vue‘
import mine from ‘./components/mine/mine.vue‘
import newslist from ‘./components/news/newslist.vue‘
import newsinfo from ‘./components/news/newsinfo.vue‘
import photolist from ‘./components/photo/photolist.vue‘
import photoinfo from ‘./components/photo/photoinfo.vue‘
import goodslist from ‘./components/goods/goodslist.vue‘
import goodsinfo from ‘./components/goods/goodsinfo.vue‘
import pictureAndTextIntruduction from ‘./components/goods/pictureAndTextIntruduction.vue‘
import goodscomment from ‘./components/goods/goodscomment.vue‘

//创建路由对象，设置路由规则
const router = new VueRouter({
    routes:[
        {path:‘/‘,redirect:‘/home‘},
        {path:‘/home‘,component:home},
        {path:‘/category‘,component:category},
        {path:‘/shopcart‘,component:shopcart},
        {path:‘/mine‘,component:mine},
        {path:‘/news/newslist‘,component:newslist},
        {path:‘/news/newsinfo/:newsId‘,component:newsinfo},
        {path:‘/photo/photolist‘,component:photolist},
        {path:‘/photo/photoinfo/:photoId‘,component:photoinfo},
        {path:‘/goods/goodslist‘,component:goodslist},
        {path:"/goods/goodsinfo/:goodsId",component:goodsinfo},
        {name:"pictureAndTextIntruduction",path:"/goods/pictureAndTextIntruduction",component:pictureAndTextIntruduction},
        {path:"/goods/goodscomment",component:goodscomment}
    ]
})

//创建一个仓库
//window
const store = new Vuex.Store({
  state: {//存储数据的地方
    goodsList:[]
  },
  getters: {//获取数据
    //获取加入购物车的商品的数组
    getGoodsList(state){
        return state.goodsList
    },
    //获取加入购物车中的总数量
    getGoodsCount(state){
        let totalCount = 0
        for(var i=0;i<state.goodsList.length;i++){
            totalCount+=state.goodsList[i].count
        }

        return totalCount
    }
  },
  mutations: {//`同步更改数据`
    /**
     * 添加商品到购物车的方法
     * 其中参数1固定的，就是代表我们的state
     * 参数2：商品信息的对象
     */
    addGoods(state,goodsObj){
        //console.log("添加商品到购物车")
        //console.log(goodsObj)
        //goodsObj ==> {goodsId:87,count:3}
        state.goodsList.push(goodsObj)
        //console.log(state.goodsList)
    },
    deleteGoodsById(state,goodsId){
        for(var i = state.goodsList.length-1 ;i>=0;i--){
            if(goodsId==state.goodsList[i].goodsId){
                state.goodsList.splice(i,1)
            }
        }
    }
  },
  actions: {//`异步更改数据`
    //可以认为是$store对象
    addGoodsAction(context,goodsObj){
        //调用mutations
        context.commit(‘addGoods‘,goodsObj)
    }
  }
})

//创建根实例，到时候，Vue去解析id=app的div
new Vue({
    el:"#app",
    router,
    store,
    render:function(createElement){ //项目一启动之后，呈现给用户的第一个组件
        return createElement(App)
    }
})

　　











以上是关于vue项目总结，所用到的技术点的主要内容，如果未能解决你的问题，请参考以下文章

第一阶段项目技术点总结（ES6技术，vue技术）

豆瓣电影个人项目总结

VueJS开发所用到的技术栈

前端vue项目内存泄漏排查总结

vue项目中总结用到的方法。

vue开发快捷键的总结