vue-cli2 构建项目【入坑指南】

构建项目

• 安装vue

npm install vue

• 全局安装vue的脚手架cli

npm install -g vue/cli

• webpack初始化项目（可不安装严格模式）

vue init webpack my-Project 

• 安装与启动

npm install
npm run dev

---

配置

• package.json

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", 
    //--host 0.0.0.0 支持用ip打开项目
    "start": "npm run dev",
    "build-prod": "node build/build.js prod", //用于打包dist
    "build-uat": "node build/build.js uat",
    "build-test": "node build/build.js test"
                                        ||
                                    process.argv[2]
  },

• build/webpack.prod.conf.js

let envConfig = undefined;
let buildEnv = 'env';
if(process.argv.length>2){
  buildEnv = process.argv[2]
}
if(buildEnv=='prod'){
  envConfig = require('../config/prod.env')
}else if(buildEnv=='uat'){
  envConfig = require('../config/uat.env')
}else if(buildEnv=='test'){
  envConfig = require('../config/test.env')
}else {
  envConfig = require('../config/dev.env')
}
const env = envConfig

• config/dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_URL: '"/api"'
})

（!）提示: prod.env.js 和 uat.env.js 直接配置 'BASE_URL'的路径

• config/index.js

proxyTable: {
  '/api': {
      // target: 'http://localhost:8080',
      target: 'https://test-api-p.tui-ing.cn/',
      changeOrigin: true,
      pathRewrite: {
          '^/api': ''
      }
  }
},

---

安装依赖

axois（http请求）
babel-polyfill（兼容IE）
elementUI (http://element-cn.eleme.io/#/zh-CN)

npm i axios
npm i babel-polyfill
npm i element-ui

• main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import constant from '@/common/constant'
import { Cascader, Message,Input,Form,FormItem,Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Cascader)
Vue.use(Input)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Button)
Vue.prototype.$message = Message;

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

---

页面路由、嵌套

• App.js 中加<router-view/>

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
    export default {
      name: 'App',
      data(){
        return {
    
        }
      }
    }
</script>

• router/index.js 配置路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
        path: '/',
        redirect: '/index'
    },
    {
      path: '/index',
      name: 'index',
      component: resolve => require(['@/view/common/content'], resolve), // 主体
      children: [{
          path: '',
          component: resolve => require(['@/view/homePage'], resolve), //子页面
      }
    ]},
    {
      path:'/agreement',
      component:resolve=>require(['@/view/agreement'],resolve), //协议页面
    }
  ]
})

• common/content.vue 划定页面嵌套关系

<template>
    <div>
        <v-head></v-head>
        <div class="contentBox">
            <router-view></router-view>
        </div>
        <v-footer></v-footer>
    </div>
</template>

<script>
    import vHead from './header.vue'
    import vFooter from './footer.vue'
    export default {
        components:{vHead,vFooter},
        data(){
            return {
                
            }
        },
    }
</script>