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)