一、Vue-cli简介 【VUE开发--Vue-Cli3(四十一)】Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

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

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

二、Vue-Cli3.0安装

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

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

2. 安装3.0 Vue Cli

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

3. 项目创建

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

文章图片
创建项目

4. 选择配置：
   注意，空格键是选中与取消，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。

文章图片
安装依赖

5. 启动项目：

npm run serve

文章图片
启动项目 三、HTML 和静态资源

public/index.html

四、配置文件

1. 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配置，接口代理以及其他配置。

2. 主要配置文件：（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"; ' } } } };

4. 端口修改
   配置文件: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",

BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
NODE_ENV - 会是 “development”、“production” 或 “test”中的一个。具体的值取决于应用运行的模式。
示例：
package.json 配置文件

"scripts": { "serve": "vue-cli-service serve --mode development", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'", "test:unit": "vue-cli-service test:unit" }

创建环境文件：
.env.development

# 环境配置 NODE_ENV= 'development' # API地址 VUE_APP_BASE_API = 'http://localhost:8000/' VUE_APP_ABC = '123'

环境变量的使用 :
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中(即在项目代码中使用)。
变量读取

console.log(process.env.VUE_APP_ABC);

注意：
更改了环境变量，必须重启服务。
六、配置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) 使用

.box { background-color: $theme-color; }

文章图片
显示结果 七、常见问题 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': '' } } },

2. This may cause things to work incorrectly. Make sure to use the same version for
   问题：

• vue@2.5.22 (C:\Users\Administrator\node_modules_vue@2.5.22@vue\dist\vue.runti
  me.common.js)
• vue-template-compiler@2.6.10 (C:\Users\Administrator\AppData\Roaming\npm\node_
  modules@vue\cli\node_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for
both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify sho
uld bump vue-template-compiler to the latest.
解决：
删除C:\Users\Administrator\node_modules_vue@2.5.22

推荐阅读

• 

  早餐句子说说心情说说 早餐心情优美句子说说
• 

  作业盒子安卓,作业盒子与全国教育资源公共服务体系互联互通
• 

  乳房疯长
• 

  女生工装外套适合搭配什么衣服呢 女生工装外套适合搭配什么衣服
• 

  单身公寓水电费吓死人是真的吗
• 

  大家那边用方言说“榆钱”,都是怎么说的？将它做成菜的话怎么做的？
• 

  普吉岛餐厅推荐
• 

  佳能800d怎么拍出背景模糊 佳能800d如何设置拍摄风景
• 

  什么是血管增生？血管增生的病因及诊断
• 

  尼康相机怎样拍照片 尼康单反怎样拍摄照片
• 

  装修中怎么做保洁更容易 自己如何在装修后进行保洁工作
• 

  怎么测脸型？
• 

  林更新的林狗怎么来的
• 

  菏泽|小女孩抱被子在产房外等妈妈，原因暖哭
• 

  腾讯电子商务案例分析
• 

  佳能最实用的镜头推荐 佳能50款最佳镜头
• 

  王一博的gn是什么意思
• 

  foxmail如何存档 Foxmail中存档的操作教程
• 

  打新冠疫苗后做核酸检测会阳性吗
• 

  尼康镜头怎么看型号 尼康镜头怎么查生产日期

• 深入理解Go之generate
• vue-cli|vue-cli 3.x vue.config.js 配置
• 2020-04-07vue中Axios的封装和API接口的管理
• 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
• VueX--VUE核心插件
• 我的软件测试开发工程师书单
• echart|echart 双轴图开发
• NPDP拆书（三）（新产品开发战略（经营与创新战略））
• vue组件中为何data必须是一个函数（）
• 用npm发布一个包的教程并编写一个vue的插件发布