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属性值:"/",修改为如图所示的:"./" 或 ""(空字符串)。

vue-cli+webpack开发流程总结

2、此步骤为解决取消打包后生成map调试文件,导致打包后项目过大的问题
打开config文件夹下的index.js文件,并修改此文件build对象中的productionSourceMap: true,将map改为false;

vue-cli+webpack开发流程总结

3、此步骤为解决打包后css背景图引用路径出错的问题
打开build文件夹下的utils.js文件,找到如下代码段,并添加红框内的代码

vue-cli+webpack开发流程总结

4、此步骤为解决promise语法兼容的问题
cmd命令行运行:

npm install --save babel-polyfill

安装完成后打开build文件夹下的webpack.base.conf.js文件添加配置:

vue-cli+webpack开发流程总结

最后在main.js中进行引入:

vue-cli+webpack开发流程总结

四、同源策略解决方案

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对象中添加入下图所示的代码段:(注:由于修改了配置文件,当前运行中的项目需要重启后才能生效配置文件的修改)

vue-cli+webpack开发流程总结

五、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标签内)下图是我所用到过的模块

vue-cli+webpack开发流程总结

最后修改build文件夹下的webpack.base.conf.js文件进行相关模块的全局注册

vue-cli+webpack开发流程总结

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为当前时间戳获取方法

相关推荐