一、环境搭建

1、装置node.js在计算机中
https://nodejs.org/en/download/ （此为node.js官方下载地点）
装置完成后翻开cmd敕令提示符

node -v        //查询node版本号
npm -v        //查询npm版本号

2、假如npm运用网速跟不上，可以挑选装置cnpm
https://npm.taobao.org/ （此为淘宝镜像官方下载地点）

运转敕令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install -g nrm

nrm ls

nrm use cnpm

二、项目构建

1、初始化建立vue项目

vue init webpack <name>

2、在弹出的音讯中做出回应

Project name：输入项目的称号（不能太长，不能为中文）
Project description：项目的形貌
Author ：项目作者
Runtime：挑选第一个回车
Install vue-router：装置路由模块（yes）
Use ESLint to lint your code：代码检测（no）
Set up unit tests：装置测试（no）
Setup e2e tests with Nightwatch：不明确（yes）
挑选运用装置的包管理东西：（挑选npm）

3、在完成以上步骤后，将自动最先实行npm装置模块敕令，假如须要用cnpm淘宝镜像举行装置则（可以ctrl+c强行中断），从新进入项目目次中检察是不是存在node_modules文件夹，若存在则删除后再举行cnpm install装置（不这么做项目可以背面跑不起来！！！）

4、所需模块装置完成后，在项目文件夹内运用cmd敕令行东西可实行：

npm run dev

敕令行实行完成以后可以在阅读器localhost:8080端口阅读初始项目

以后是重点，记笔记啊！

三、项目打包

1、此步骤为处理assets打包后图片地点毛病题目
翻开config文件夹下的index.js文件，并修正此文件build对象中的assetsPublicPath属性值：”/”，修正为如图所示的：”./” 或 “”(空字符串)。

2、此步骤为处理作废打包后天生map调试文件，致使打包后项目过大的题目
翻开config文件夹下的index.js文件，并修正此文件build对象中的productionSourceMap: true,将map改成false;

3、此步骤为处理打包后css背景图援用途径失足的题目
翻开build文件夹下的utils.js文件，找到以下代码段，并增加红框内的代码

4、此步骤为处理promise语法兼容的题目
cmd敕令行运转：

npm install --save babel-polyfill

装置完成后翻开build文件夹下的webpack.base.conf.js文件增加设置：

末了在main.js中举行引入：

四、同源战略处理方案

1.cmd敕令行运转：（若运用vue-cli搭建的项目可疏忽此敕令，项目中已被装载，可进入步骤2）

npm i http-proxy-middleware -D

2.在config文件夹下建立proxyConfig.js并增加以下相干代码：

module.exports = {
    proxyList: {
        "/api": {
            target: "localhost:8060",    //须要代办的长途API的HOST
            changeOrigin: true,          //是不是跨域
            pathRewrite: {               //API别号
                "^/api": ""
            }
        }
    }
}

3.在config文件夹下翻开index.js中引入刚建立的proxyConfig.js

const proxyConfig = require('./proxyConfig')

并在dev对象中增到场下图所示的代码段：（注：因为修正了设置文件，当前运转中的项目须要重启后才见效设置文件的修正）

五、axios运用技能

1.起首举行axios的装载，运用cmd敕令提示符运转敕令：

npm i axios -S

2.在main.js中引入axios，并将其注入至全局Vue实例的原型对象中，以后将可以在组件内运用this.axios举行挪用：

import axios from 'axios'
Vue.prototype.axios = axios;

注：
GET要求时，axios入参为：params，参数值为：JSON范例数据，例：

this.axios({
      url:"http://localhost:8060/sendrequest",   //要求途径，本地跨域可将  http://localhost:8060  替换为  /api
      headers:{},            //要求头信息
      method:"GET",          //要求体式格局为GET
      params:{               //要求参数
        a:1
      }
})
.then(res=>{
      console.log(res)    //要求胜利
})
.catch(error=>{
      console.log(error)  //要求非常
})

POST要求时，axios入参为：data，参数值须要做以下qs.stringify转换，不然会涌现于jquery提议要求传参体式格局差别，qs可在vue组件内直接举行import引入：

import qs from 'qs'

this.axios({
      url:"http://localhost:8060/sendrequest",   //要求途径，本地跨域可将  http://localhost:8060  替换为  /api
      headers:{},            //要求头信息
      method:"POST",         //要求体式格局为GET
      data:qs.stringify({                 //要求参数
        a:1,
        b:2
      })
})
.then(res=>{
      console.log(res)    //要求胜利
})
.catch(error=>{
      console.log(error)  //要求非常
})

六、机能优化

1.router路由机能优化
将VueRouter对象修正组件引入体式格局为按需引入：

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: "",
      component: resolve => require(["@/components/index"], resolve),
      name: "index",
    },
    {
      path: "/home",
      name: "home",
      component: resolve => require(["@/components/home"], resolve)
    },
  ]
})

2.削减打包容量
削减main.js中对模块的引入，比方：

import vue from 'vue';
import vueRouter from 'vue-router'

删除以上代码，将此模块的vue.min.js/vue-router.min.js在node_modules中找出，存入项目的static静态资本目次下，并在index.html进口页面中举行相对途径的引入（此类资本script引入需写在body标签内）下图是我所用到过的模块

末了修正build文件夹下的webpack.base.conf.js文件举行相干模块的全局注册

3.关于百度舆图api按需引入的题目优化
因为cli构建vue项目为单页面运用，在index.html中全局举行引入百度舆图script体式格局不利于项目优化，但动态建立的scirpt引入百度舆图api将会js报非常，且在https访问下还会涌现平安阻拦，后发明处理体式格局：引入两个百度舆图api。（加载百度舆图api后报错的js，我们再加载一遍）

var s = document.createElement('script');
s.src= "https://api.map.baidu.com/api?v=2.0&ak=你的api秘钥";
var s2 = document.createElement('script');
s2.src= "https://api.map.baidu.com/getscript?v=2.0&ak=你的api秘钥&services=&t="+getTime();        //getTime为当前时候戳猎取要领