vue-cli+webpack开发流程总结
一、环境搭建
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为当前时间戳获取方法