vue-cli+webpack开发流程总结

shiweifu 发布于2019-08-23 14:55 / 3311人阅读

摘要：加载百度地图后报错的，我们再加载一遍你的秘钥你的秘钥为当前时间戳获取方法

一、环境搭建

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

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

GPU云服务器云服务器 webrtc音视频开发总结 android webrtc 音视频开发总结开发流程开发测试流程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101352.html

前端开发之走进Vue.js

摘要：作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本，的简称。的包管理工具，用于同一管理我们前端项目中需要用到的包插件工具命令等，便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通...

zxhaaa 2019-08-20 15:20 评论0 收藏0
Vue-cli浅入浅出

摘要：别名相当于前面先引入了路由插件，然后显式声明要用路由。注意到，等都是页面也可以是组件，接着注册路由器，然后开始配置路由。搭建环境工欲善其事必先利其器，我们的学习计划从学会搭建Vue所需要的环境开始，node和npm的环境不用说是必须的，现在前端流程化很热门，基本上新的技术都会在这套流程的基础上做开发，我们只需要站在巨人的XX上装*就可以了。我假设你的机子上已经有了最新的node和n...

endiat 2019-08-01 18:00 评论0 收藏0
2018年第33周-javeer对nodejs体会

摘要：流程源处理源代码，例如过滤任何值。工艺类从编译后处理生成的文件，例如对类进行字节码增强。整合后的测试执行集成测试后执行所需的操作。校验运行任何检查以验证包装是否有效并符合质量标准。 nodejs和es6 nodejs的语法和es6不一样，如模块系统，一个是CommonJS的require、一个是es6的import，写模块也不一样。 nodejs的npm 我来理解，nodejs类似与j...

xiongzenghui 2019-08-26 12:15 评论0 收藏0
基于webpack模仿vue-cli（简略版）工程化

摘要：但高度封装的带来方便的同时，很多人却很少去关注轮子的内部结构，以至于当使用需要手动配置一些东西如编译实现代码压缩，移动端适配等配置的时候往往无从下手。废话不多说，下面我们来看看如何基于模仿实现项目工程化。从零搭建vue-cli 原创不易，如需转载请联系作者并注明出处 vue-cli的出现为vue工程化前端开发工作流提供了开箱即用的构建配置，减轻了烦人的webpack配置流程。但高度封...

GitCafe 2019-08-26 11:35 评论0 收藏0
vue-cli解析

摘要：在中，设置了一些配置，代码如下通过它的注释，我们可以理解它在中配置了静态路径本地服务器配置项等参数。下面还有一个的对象，它是在本地服务器启动时，打包的一些配置，代码如下其中包括模版文件的修改，打包完目录之后的一些路径设置，压缩等。前言这段时间，算是空出手来写几篇文章了。由于很久都没有时间整理现在所用的东西了，所以，接下来会慢慢整理出一些文档来记录前段时间的工作和生活。这篇文章的主...

KunMinX 2019-08-21 18:24 评论0 收藏0