vue项目架构配置

一、生产简单项目

   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-dev

    3、修改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: ''
})

  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.author

 6、从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页面中就可以直接使用。