vue项目生产模式构建

vue+mintui构建项目

ps:

• 帮助vue初学者如何使用cli快速构建项目用于生产环境。
• 配置vue项目所用依赖包。
• 如有问题请发邮件到 zzy1031839775@163.com

传送门

VUE官方文档
MintUI官方文档
VUEX官方文档
axios官方文档

开始之前

---

1. 安装node
2. 安装npm

构建项目

---

#windows系统忽略 $符号
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack myapp(此处为项目名称)
# 进入项目文件夹
$ cd mypp
#安装依赖包
$ npm install
#此时还需要 sass依赖 以及MintUI、axios 
$ npm install sass sass-loader node-sass --save-dev
$ npm install mint-ui axios -S
# 启动项目
$ npm run dev
# 编译项目
$ npm run build

devserver配置

---

打开 myapp/config/index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //是否生成.js.map文件
    productionSourceMap: false,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    //端口号
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //配置代理服务解决开发环境中跨域问题
    proxyTable: {
        "/mock":{
                //实际url
                target:"http://localhost:9000/",
                /*changeOrigin接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。*/
                changeOrigin:true,
                
                pathRewrite:{
                "^/mock":"/mock"
            }
        }
    },
    cssSourceMap: false
  }
}

axios配置

---

安装
    npm i axios -S 安装本地依赖包

建立
    myapp/src/scripts/utils/axios.js

import axios from 'axios'

export default {
  get: (param)=>{
    axios({
      url: param.url,
      method: param.method,
      data:param.data
    })
    .then(function (res) {
      param.callback(res)
    })
  },
  post:(param)=>{
    axios({
      url: param.url,
      //请求方式
      method: param.method,
      //请求头
      headers:param.headers,
      // request body
      data:param.data
    })
    .then(function (res) {
      param.callback(res)
    })
  }
}

axios使用

//引入文件
import utilAxios from '../../utils/axios'
//使用get方法
utilAxios.get({
    //url参数
	url: 'api/index/v1/m-banner',
	method: 'GET',
	//回调函数
	callback: function (res) {
		console.log(res)
	}
})

VUEX 安装与使用

---

安装
    npm install vuex --save
建立
    myapp/src/scripts/vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store=new Vuex.Store({
    state:{
        user:false
    },
    mutations:{
        change:(state,user)=>{
            state.user=user
        }
    }
})
export default store

import store from '../vuex/store.js'
//调用change方法
store.commit('change',true)
//获取user值
let user=store.state.user

MintUI使用(坑比较多后面持续更新)

//在 main.js中引入
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

<template lang="html">
  <div>
      <mt-header title="Title"></mt-header>
  </div>
</template>

<script>
import Vue from 'vue'
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);
export default {

}
</script>

vue-router

myapp/src/script/rputer/index.js

//引入依赖
import Vue from 'vue'
import Router from 'vue-router'
//引入页面
import Index from '../components/Index'
import About from '../components/about.vue'
import Home from '../components/home.vue'
import Dome from '../components/dome/lod.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      //根路由
      path: '/',
      name: 'index',
      component:Index,
      //设置默认路由
      redirect: '/home',
      //子路由
      children:[
        {
          path:"/home",
          name:"home",
          component:Home
        },
        {
          //路由传参
          path:"/about/:id",
          name:"about",
          component:About
        }
      ]
    },{
      path:"/list",
      name:"list",
      component:Dome
    }
  ]
})

//router-link
//tag:默认为a标签属性 可以改为其他如 div li 等
<router-link to="/about/123" tag="div">我的</router-link>

//接收路由传参
console.log(this.$route.params.id)

Myapp