VUE开发--Vue-Cli3(四十一)

2019-07-04 本文已影响71人无剑_君

一、Vue-cli简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：

可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
网址：
https://cli.vuejs.org/zh/

二、Vue-Cli3.0安装

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。
如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过

 npm uninstall vue-cli -g 
或
 yarn global remove vue-cli 卸载它。

安装3.0 Vue Cli

# 安装3.0  Vue Cli
npm install -g @vue/cli

项目创建

# 创建一个项目
vue create hello-world
# 创建完成后，可以通过命令打开图形化界面
vue ui

创建项目

选择配置：
注意，空格键是选中与取消，A键是全选
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

选择配置

选择sass

代码风格检查

单元测试框架

i配置文件

其它的全部选择: yes。

安装依赖

启动项目：

npm run serve

启动项目

三、HTML 和静态资源

public/index.html

四、配置文件

process.env.BASE_URL配置

vue-cli3的源码部分：@vue/cli-service/lib/util/resolveClientEnv.js

process.env.BASE_URL配置

核心：env.BASE_URL = options.baseUrl；
在项目根目录创建一个 vue.config.js文件，可进行baseUrl配置，接口代理以及其他配置。

主要配置文件：（vue.config.js）

tests-----单元测试目录
.browserslistrc-----浏览器兼容配置文件
.eslintrc.js-----eslint代码检查配置
.postcssrc.js-----postcss配置文件
.package.json-----项目依赖和启动的配置文件

新建文件：vue.config.js

const path = require('path');
//源码路径
function resolve(dir = '') {
  return path.join(__dirname, './src', dir);
}
//导入模块资源
module.exports = {
    // 基本路径
    publicPath: './',
    // 输出文件目录
    outputDir: 'dist',
    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: 'static',
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    // webpack-dev-server 相关配置
    devServer: {
      host: '0.0.0.0',
      //端口号
      port: 8082,
      https:false
    },
    chainWebpack: config => {
      config.plugins.delete('prefetch');
      config.plugins.delete('preload');
    },
    configureWebpack: {
      resolve: {
        alias: {
          core: resolve('core')
        }
      },
      optimization: {
        runtimeChunk: {
          name: entrypoint => `runtime~${entrypoint.name}`
        },
        splitChunks: {
          minChunks: 2,
          minSize: 20000,
          maxAsyncRequests: 20,
          maxInitialRequests: 30,
          name: false
        }
      }
    },
     //css相关配置
    css: {
      loaderOptions: {
        sass: {
          data:
            '@import "@/assets/scss/_var.scss";@import "@/assets/scss/_mixin.scss";'
        }
      }
    }
  };

端口修改
配置文件:vue.config.js

 devServer: {
        // 通知dev server在服务器启动后打开浏览器。将其设置为true以打开默认浏览器。
        // Darwin是由苹果电脑于2000年所释出的一个开放原始码操作系统。
        // process.platform：列举node运行的操作系统的环境，只会显示内核相关的信息，
        // 如：linux2， darwin，而不是“Redhat ES3” ，“Windows 7”，“OSX 10.7”等；
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        // 将端口改为8081与服务端口一致，否则
        // 报GET http://localhost:8080/sockjs-node/info?t=1563288873572 404 (Not Found)
        port: 8088,
        https: false,
        hotOnly: false,
        disableHostCheck: false,
        // 设置代理
        proxy: {
            '/api': {
                // 目标 API 地址
                target: 'http://localhost:8081/',
                // 如果要代理 websockets,不使用请关闭
                ws: true,
                // 将主机标头的原点更改为目标URL
                // changeOrigin: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },

五、环境变量和模式

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
.env.development  # 只在生产环境执行
.env.production   # 只在开发环境执行

一个环境文件只包含环境变量的“键=值”对：

FOO=bar
VUE_APP_SECRET=secret

环境加载属性
为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。
模式：
模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

注意模式不同于 NODE_ENV，一个模式可以包含多个环境变量。也就是说，每个模式都会将 NODE_ENV 的值设置为模式的名称——比如在 development 模式下 NODE_ENV 的值会被设置为 "development"。
你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。
你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入：

"dev-build": "vue-cli-service build --mode development",

六、配置scss

1) 新建scss文件

src\styles\global.scss

$theme-color: red;

2) vue.config.js配置

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        // 根据自己样式文件的位置调整
        data: `@import "@/styles/global.scss";`
      }
    }
  }
}

3) 使用

<template>
  <div id="app">
    <div class="box">测试SCSS</div>
  </div>
</template>
<style lang="scss">
.box {
  background-color: $theme-color;
}
</style>

显示结果

七、常见问题

1. TypeScript引入JS文件

tsconfig.json 配置

    "allowJs": true,

2. 项目运行时一直发http://localhost:8080/sockjs-node/info?t=1462183700002请求

请更改配置文件:vue.config.js
port: 8081修改端口即可

服务端口

    devServer: {
        // 通知dev server在服务器启动后打开浏览器。将其设置为true以打开默认浏览器。
        // Darwin是由苹果电脑于2000年所释出的一个开放原始码操作系统。
        // process.platform：列举node运行的操作系统的环境，只会显示内核相关的信息，
        // 如：linux2， darwin，而不是“Redhat ES3” ，“Windows 7”，“OSX 10.7”等；
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        // 修改端口即可
        // 报GET http://localhost:8080/sockjs-node/info?t=1563288873572 404 (Not Found)
        port: 8081,
        https: false,
        hotOnly: false,
        disableHostCheck: false,
        // 设置代理
        proxy: {
            '/api': {
                // 目标 API 地址
                target: 'http://localhost:8081/',
                // 如果要代理 websockets,不使用请关闭
                ws: true,
                // 将主机标头的原点更改为目标URL
                // changeOrigin: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },