1：安装vue

a：执行npm install -g @vue/cli

b：配置环境变量 D:\java\node-v10.14.1\node_global （因为vue是全局安装的，设置过全局安装路径，这里环境变量路径为这个）

全局包放置路径设置

查看node安装路径：where node

查看全局包放置路径：npm root -g

修改全局包放置路径

先查看安装路径

node安装目录下下新建两个文件夹

node_global 全局包下载存放

node_cache node缓存

npm config set prefix "D:\java\node-v10.14.1\node_global"
npm config set cache D:\java\node-v10.14.1\node_cache"

c：通过cmd 打开控制台输入查看是否安装成功

2：创建vue项目

a：通过vue ui 创建（图形界面）

b：vue create hello-world（cmd 命令）参考：https://www.jianshu.com/p/08ae3606d5f3

3：启服务npm run serve

根据package.json文件

 "scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "test": "vue-cli-service build --mode test",
    "prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  }

4：查看webpack 配置

vue inspect > output.js 其输出重定向到一个文件以便进行查阅

5：本地预览

dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器，例如 serve：

npm install -g serve# -s 参数的意思是将其架设在 Single-Page Application 模式下

这个模式会处理即将提到的路由问题serve -s dist

6：根据不同的环境设置不同的请求api路径

项目根目录下创建env文件

dev：开发环境 test：测试环境 prod：生产环境

文件定义变量

VUE_APP_URL=服务域名

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_SECRET)

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。

BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

image

7: 编译打包文件的压缩优化

先安装：npm install compression-webpack-plugin --save-dev

vue.config.js配置js、css压缩

let CompressionPlugin = require("compression-webpack-plugin"); //文件压缩
if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin')
      .use(new CompressionPlugin({
        test:/\.js$|\.html$|.\css/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false // 不删除源文件
      }))
  }

nginx配置

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

8：引用jquery插件

a：安装jquery npm install jquery --save

b：配置vue.config.js文件

 plugins: [
      //引入jquery插件
     new webpack.ProvidePlugin({
         $:"jquery",
        jQuery:"jquery",
        "windows.jQuery":"jquery"
    })
]

9：使用axios请求数据

先安装需要的包

npm install axios vue-axios --save-dev

创建js文件导入插件

image

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
// 请求超时
axios.defaults.timeout = 5000
//设置默认请求url
axios.defaults.baseURL = "/hy"

超时处理和异常处理

import httpErrUtil from '@/assets/js/util/httpErrUtil.js'
axios.defaults.retry = 5; //可请求次数
axios.defaults.retryDelay = 1000; //再次请时间
axios.interceptors.response.use(function(response) {
    //请求成功
    if (response.status == 200) {
        return response;
    }
    }, (error) => {
        var config = error.config;
        if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
            config.__retryCount = config.__retryCount || 0;
            //是否超过总的请求次数
            if (config.__retryCount >= axios.defaults.retry) {
                // 返回错误信息        
                alert("请求超时")
                return Promise.reject(error);
        }
        config.__retryCount += 1;
        //再次发送请求
        var newHttp = new Promise(function(resolve) {
            setTimeout(function() {
               resolve();
            }, axios.defaults.retryDelay || 1);
        })
        return newHttp.then(function() {
            return axios(config)
        })
    }
    //其他异常处理
    if (error && error.response) {
        layer.alert(httpErrUtil.getErrMsg(error.response.status))
    }
    return Promise.reject(error)
})

httpErrUtil.js

const ERR_CODE_LIST = { //常见错误码列表
  [400]: "请求错误",
  [401]: "登录失效或在其他地方已登录",
  [403]: "拒绝访问",
  [404]: "请求地址出错",
  [408]: "请求超时",
  [500]: "服务器内部错误",
  [501]: "服务未实现",
  [502]: "网关错误",
  [503]: "服务不可用",
  [504]: "网关超时",
  [505]: "HTTP版本不受支持"
}
const httpErrUtil = {
    getErrMsg:function(error) {//通过error处理错误码
      if(!error.response) {//无网络时单独处理
        return "网络不可用，请刷新重试"
      }
      const errCode = error.response.status //错误码
      const errMsg = ERR_CODE_LIST[errCode] //错误消息
    
      return errMsg;
    }
}

module.exports = httpErrUtil

封装统一请求参数

npm install qs
import qs from 'qs'
axios.interceptors.request.use((config) => {
    const actNo = "1";
    const actToken = "2";
    if (config.headers['Content-Type'] == 'multipart/form-data') {
        config.data.set('actNo', actNo);
        config.data.set('actToken', actToken); 
        return config; 
    }
    //判断请求的类型：如果是post请求就把默认参数拼到data里面；如果是get请求就拼到params里面 
    if (config.method === 'post') {              
        config.data = qs.stringify({
            actNo: actNo,
            actToken: actToken,
            ...config.data.data
    })
    } else if (config.method === 'get') {
        config.params = {
            actNo: actNo,
            actToken: actToken,
            ...config.params
        }
    }
    return config;
})

调用

axios.get('/hy/lottery/vueTest.do').then(res => {
    alert(res)
})

10：vue-router路由传参引起的问题解决（user/:id）id为参数

a：地址栏带有#

设置mode为history
new VueRouter({
      mode: 'history',
      routes:routes
})

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果你在 history 模式下使用 Vue Router，是无法搭配简单的静态文件服务器的。例如，如果你使用 Vue Router 为 /todos/42/ 定义了一个路由，开发服务器已经配置了相应的 localhost:3000/todos/42 响应，但是一个为生产环境构建架设的简单的静态服务器会却会返回 404。

为了解决这个问题，你需要配置生产环境服务器，将任何没有匹配到静态文件的请求回退到 index.html。Vue Router 的文档提供了常用服务器配置指引。

b：页面刷新报错

vue.config.js 修改publicPath，"./"或者"/"修改为项目名

11：移除添加class事件（event当前事件对象）

event.target.classList.add('caseopen'); //添加class
event.target.classList.toggle('caseopen'); //移除class

12：子组件修改父组件值

父组件使用sync

子组件props接收
props: {
    lotteryCount: { type: Number, default: 0 }
}
this.$emit("update:lotteryCount",this.lotteryCount-1); 修改

13：后端 API 服务器解决跨域

vue.config.js增加以下配置

target：取得配置文件路径，环境不同请求路径不同

devServer: {
    index: 'index.html', //默认启动serve 打开login.html页面
    proxy: {
     '/hy': {
         target: process.env.VUE_APP_URL,
         ws: true,
         changeOrigin: true,
         pathRewrite: {
                  '^/hy': ''
             }
          }
      }
}

14：获取命令行参数（根据命令行参数决定打包名）

创建environment.js

//获取命令行参数
const configArgv = JSON.parse(process.env.npm_config_argv);

const original = configArgv.original.slice(1);

const actNo = original[1] ? original[1].replace(/-/g, "") : "";

module.exports = {

    actNo

};

vue.config.js引用

let outputDir=process.env.VUE_APP_ACT_NO //bulid后文件名称
const environment = require("./util/environment"); 
const actNo=environment.actNo;
if(actNo!=undefined && actNo!=null && actNo!=""){
    outputDir=actNo;
}

15：打包后ji加密

安装 webpack-obfuscator

npm install  webpack-obfuscator   --save-dev

vue.config.js引用

const JavaScriptObfuscator = require('webpack-obfuscator'); //js加密

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production' && encryption == true) {
      return {
        plugins: [
          //js代码加密
          new JavaScriptObfuscator({
            rotateUnicodeArray: true, // 必须为true
            compact: true, // 紧凑 从输出混淆代码中删除换行符。
            controlFlowFlattening: false, // 此选项极大地影响了运行速度降低1.5倍的性能。 启用代码控制流展平。控制流扁平化是源代码的结构转换，阻碍了程序理解。
            controlFlowFlatteningThreshold: 0.8,
            deadCodeInjection: true, // 此选项大大增加了混淆代码的大小（最多200％） 此功能将随机的死代码块（即：不会执行的代码）添加到混淆输出中，从而使得更难以进行反向工程设计。
            deadCodeInjectionThreshold: 0.5,
            debugProtection: false, // 调试保护  如果您打开开发者工具，可以冻结您的浏览器。
            debugProtectionInterval: true, // 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式
            disableConsoleOutput: true, // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。
            domainLock: [], // 锁定混淆的源代码，
            identifierNamesGenerator: 'hexadecimal', // 使用此选项可控制标识符（变量名称，函数名称等）的混淆方式。
            identifiersPrefix: '', // 此选项使所有全局标识符都具有特定前缀。
            inputFileName: '',
            log: false,
            renameGlobals: false, // 不要启动 通过声明启用全局变量和函数名称的混淆。
            reservedNames: [], // 禁用模糊处理和生成标识符，这些标识符与传递的RegExp模式匹配。
            reservedStrings: [], // 禁用字符串文字的转换，字符串文字与传递的RegExp模式匹配。
            rotateStringArray: true, //
            seed: 0, // 默认情况下（seed = 0），每次混淆代码时都会得到一个新结果（即：不同的变量名，插入stringArray的不同变量等）。如果需要可重复的结果，请将种子设置为特定的整数。
            selfDefending: false, // 此选项使输出代码能够抵抗格式化和变量重命名。如果试图在混淆代码上使用JavaScript美化器，代码将不再起作用，使得理解和修改它变得更加困难。需要紧凑代码设置。
            sourceMap: false, // 请确保不要上传嵌入了内嵌源代码的混淆源代码，因为它包含原始源代码。源映射可以帮助您调试混淆的Java Script源代码。如果您希望或需要在生产中进行调试，可以将单独的源映射文件上载到秘密位置，然后将浏览器指向该位置。
            sourceMapBaseUrl: '', // 这会将源的源映射嵌入到混淆代码的结果中。如果您只想在计算机上进行本地调试，则非常有用。
            sourceMapFileName: '',
            sourceMapMode: 'separate',
            stringArray: true, // 将stringArray数组移位固定和随机（在代码混淆时生成）的位置。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
            stringArrayEncoding: false, // 此选项可能会略微降低脚本速度。使用Base64或RC4对stringArray的所有字符串文字进行编码，并插入一个特殊的函数，用于在运行时将其解码回来。
            stringArrayThreshold: 0.8, // 您可以使用此设置调整字符串文字将插入stringArray的概率（从0到1）。此设置在大型代码库中很有用，因为对stringArray函数的重复调用会降低代码的速度。
            target: 'browser', // 您可以将混淆代码的目标环境设置为以下之一： Browser 、Browser No Eval 、Node 目前浏览器和节点的输出是相同的。
            transformObjectKeys: false, // 转换（混淆）对象键。
            unicodeEscapeSequence: true, // 将所有字符串转换为其unicode表示形式。
          }, ['vueDemo.js'])
        ],
      }
    }
  }

16：分析打包后各文件的体积webpack-bundle-analyzer插件使用

（1）：安装插件

npm install --save-dev webpack-bundle-analyzer

（2）：vue.config.js配置

module.exports = {
  chainWebpack: config => {
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
}

（3）：执行npm run serve
http://127.0.0.1:8888/就可以访问了

17：实现复制内容到剪贴板功能-clipboard2

npm install vue-clipboard2 --save
主js引用
import VueClipboard  from 'vue-clipboard2'
Vue.use(VueClipboard )
使用

    ABCD12346A
    

copy() {
    var val = document.getElementById("copyVal").innerHTML;
    this.$copyText(val)
   .then(e => {
     alert("复制成功")
    }, e => {
    alert("复制失败")
    })
}

18：图片压缩image-webpack-loader

npm下载下来的时候因为翻墙的问题，包下载的不完全会导致乱码所以用国内的

cnpm install image-webpack-loader --save-dev
 // webpack配置
 chainWebpack: config => {
    // ============压缩图片 start============
    config.module
        .rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({ bypassOnDebug: true })
        .end()
    // ============压缩图片 end============
    }

19：解决build打包有缓存问题

 // webpack配置
if (process.env.NODE_ENV === 'production' ) {
    config.output.filename('static/js/[name].[chunkhash].' + timestamp + '.js').end()
    config.output.chunkFilename('static/js/[id].[chunkhash].' + timestamp + '.js').end()
}

vue-cli使用手册

2：创建vue项目

3：启服务npm run serve

4：查看webpack 配置

5：本地预览

这个模式会处理即将提到的路由问题serve -s dist

6：根据不同的环境设置不同的请求api路径

7: 编译打包文件的压缩优化

vue.config.js配置js、css压缩

nginx配置

8：引用jquery插件

a：安装jquery npm install jquery --save

b：配置vue.config.js文件

9：使用axios请求数据

先安装需要的包

创建js文件导入插件

超时处理和异常处理

封装统一请求参数

调用

a：地址栏带有#

b：页面刷新报错

11：移除添加class事件（event当前事件对象）

12：子组件修改父组件值

13：后端 API 服务器解决跨域

14：获取命令行参数（根据命令行参数决定打包名）

15：打包后ji加密

16：分析打包后各文件的体积webpack-bundle-analyzer插件使用

17：实现复制内容到剪贴板功能-clipboard2

18：图片压缩image-webpack-loader

19：解决build打包有缓存问题

你可能感兴趣的:(vue-cli使用手册)

vue-cli使用手册

2：创建vue项目

3：启服务npm run serve

4：查看webpack 配置

5：本地预览

这个模式会处理即将提到的路由问题serve -s dist

6：根据不同的环境设置不同的请求api路径

7: 编译打包文件的压缩优化

vue.config.js配置js、css压缩

nginx配置

8：引用jquery插件

a：安装jquery npm install jquery --save

b：配置vue.config.js文件

9：使用axios请求数据

先安装需要的包

创建js文件 导入插件

超时处理和异常处理

封装统一请求参数

调用

a：地址栏带有#

b：页面刷新报错

11：移除添加class事件（event当前事件对象）

12：子组件修改父组件值

13：后端 API 服务器 解决跨域

14：获取命令行参数（根据命令行参数 决定打包名）

15：打包后ji加密

16：分析打包后各文件的体积webpack-bundle-analyzer插件使用

17：实现复制内容到剪贴板功能-clipboard2

18：图片压缩image-webpack-loader

19：解决build打包有缓存问题

你可能感兴趣的:(vue-cli使用手册)

创建js文件导入插件

13：后端 API 服务器解决跨域

14：获取命令行参数（根据命令行参数决定打包名）