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