一、生产简单项目
1、通过cmd控制台，cd到想要创建项目的文件夹，然后输入：vue init webpack vueCli
2、进入新创建的项目文件夹，安装依赖：npm install
3、运行项目：npm run dev
二、配置开发环境和发布环境的接口地址
1、在控制生产环境的config/dev.env.js文件中添加开发环境接口地址：BASE_API:'"http://192.168.10.34:8080/api"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API:'"http://192.168.10.34:8080/api"'
})2、在控制发布环境的config/prod.env.js文件中添加开发环境接口地址：BASE_API:'"http://www.baidu,com/api"'
module.exports = {
NODE_ENV: '"production"',
BASE_API:'"http://192.168.10.34:8080/api"'
}
3、在src文件夹下新建一个api文件夹，在api文件夹下添加index.js文件去配置接口调用时的地址
const API = process.env.BASE_API注：最后重新启动项目就可以了,当npm run dev的时候就运行在生产环境,当npm run build的时候就是正式的线上环境.
三、css样式统一管理
全局安装一个scss，在该scss中引入其他scss文件。
1、安装node-sass、sass-loader、style-loader（如果安装一直不能添加成功，查看是否安装了python，需要安装python才能下载成功）
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev 2、安装sass-resources-loader
cnpm install sass-resources-loader --save-dev3、修改build中的utils.js
scss: generateLoaders('sass')
修改成:
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/style/global.scss')
}
}
)4、在global.scss文件中引入其他scss文件
@import "main.scss";四、引入vuex管理
1、安装vuex：npm install vuex -S
2、在 main.js 中引入
// 引入vuex
import Vuex from 'vuex'
import store from './store/index'
Vue.use(Vuex)
/* eslint-disable no-new */
new Vue({
el: '#app',
store,// 引入核心仓库
router,
components: { App },
template: '<App/>'
})3、构建核心仓库，
Vuex 应用的状态 state 都应当存放在 store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
author: 'Wise Wrong'
}
})
export default store这是一个最简单的 store.js，里面只存放一个状态 author。虽然在 main.js 中已经引入了 Vue 和 Vuex，但是这里还得再引入一次。
4、使用store传递值，在核心库里添加官方修改事件
const store = new Vuex.Store({
// 定义状态
state: {
author: 'Wise Wrong'
},
// 修改状态
mutations: {
newAuthor (state, msg) {
state.author(msg)
}
}
})5、在需要的地方修改author值和获取值
//修改author值
this.$store.commit('newAuthor',this.msg)
//获取author值
this.$store.state.author6、从vuex中获取值和方法
import { mapActions, mapGetters } from 'vuex'
computed: {
// 获取vuex对象
...mapGetters([
'menuitems',
'isLoadRoutes'
// ...
]),
// 从vuex获取方法
...mapActions([
'addMenu',
'loadRoutes'
])
}五、接口管理
1、安装axios：npm install axios --save
2、接口代理设置，为了请求可以正常发送，我们一般要进行一个接口代理的配置，这样可以避免请求跨域，项目打包之后，后端一般也要搭建一个nginx之类的东西进行转发请求，不然请求会因为跨域问题失败的。
//文件位置：config/index.js
proxyTable: {
'/api': {
target: 'http://47.95.xxx.246:8080', // 通过本地服务器将你的请求转发到这个地址
changeOrigin: true, // 设置这个参数可以避免跨域
pathRewrite: {
'/api': '/'
}
},
},设置好了之后，当你在项目中要调用http://47.95.xxx.246:8080这个服务器里面的接口，可以直接用/api代替服务器地址。
3、封装接口，在src文件夹下创建文件，只有在api下能引用到就好。
六、配置mock环境
1、添加mock服务：npm install mockjs --save-dev
2、在项目的根目录下新建mock文件夹，将我的本地的testApi的json文件放在下面(这里我就没有用Mock模拟数据，而是用mock指向我本地的json文件)，然后在mock根目录下新建server.js文件，此文件会将本地的json文件路径映射到mock定义的路径下，然后定义端口号取监听他的新的url，这里我们要安装koa,koa-router模块,实例代码如下：
let app = require('koa')()
let router = require('koa-router')()
router.get('/', function *(next) {
this.body = '已进入mock环境!'
})
let leftMenu = require('./testApi/leftMenu.json')
router.get('/mock/leftMenu', function *(next) {
this.body = leftMenu
})
app.use(router.routes())
.use(router.allowedMethods())
app.listen(5000)
3、package.json下的scripts里面添加mock服务
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"e2e": "node test/e2e/runner.js",
"test": "npm run e2e",
"build": "node build/build.js",
"mock": "node --harmony ./mock/server.js"
},七、路由配置
1、
八、引入Element
1、安装 loader 模块：
cnpm install style-loader -D
cnpm install css-loader -D
cnpm install file-loader -D
2、安装 Element-UI 模块
cnpm install element-ui --save
3、修改 webpack.base.conf.js 的配置
{
test: /\\\\\\\\.css$/,
loader: "style!css"
},
{
test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
loader: "file"
}
4、在src/main.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // elementUI 2.0版本
Vue.use(ElementUI)
之后在vue页面中就可以直接使用。