共计 3316 个字符，预计需要花费 9 分钟才能阅读完成。
一、环境搭建
1、安装 node.js 在计算机中 https://nodejs.org/en/download/（此为 node.js 官方下载地址）安装完成后打开 cmd 命令提示符
node -v // 查询 node 版本号
npm -v // 查询 npm 版本号
2、如果 npm 使用网速跟不上，可以选择安装 cnpmhttps://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 为当前时间戳获取方法
