peyton Blog
2021-12-17

0入门

vue-cli 3.0 入门

此文章只针对入门的学习，简洁版操作请看第二篇**《vue-cli3.0入门》**

简介

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能>够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必>花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵>活性，无需 eject。

安装

 npm  install -g @vue/cli

检测版本

 vue -version  //vue 3.** is right

创建一个项目

 vue create hello-world

选择预设

默认基本版，
自定义选择版
cli-new-project.png

此处我们选择 自定义 供开发使用

选择项目需要的一些特性（此处我们选择需要Babel编译、TypeScript ,PWA ,使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)）
cli-select-features.png

PWA是什么?

PWA == Progressive Web APP, 渐进式 Web 应用。
实际上是通过 Web 技术编写出的一个网页应用，加上App Manifest和Service Worker来实现PWA的安装和离线缓存等功能。
可以添加至主屏幕，点击主屏幕图标可以实现启动动画及隐藏地址栏
实现离线缓存功能
实现了消息推送
PWA 的实现-Manifest 实现添加至主屏幕
首先在index.html的head中引入manifest.json文件，尽可能早的引入

选择CSS预处理器语言，此处选择LESS

1196972-d2be541d362b1662.png

vue-cli-2.png

2.4. 选择ESLint的代码规范，此处使用 Standard代码规范

1196972-cf85c45a5d432058.png

vue-cli-3.png

2.5. 选择何时进行代码检测，此处选择在保存时进行检测

1196972-42088b0085a848c9.png

vue-cli-4.png

2.6. 选择单元测试解决方案，此处选择 Jest

1196972-e631d9f71ab1e18a.png

2.7. 选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中

1196972-5dad67c616d6dc0c.png

2.8. 配置完成后等待Vue-cli完成初始化

1196972-c27e74c06fadc518.png

2.9### vue-cli初始化完成后，根据提示，进入到vue-test项目中，并启动项目

// 进入到vue-test项目
cd vue-test
// - 启动服务
yarn serve  npm run serve
// - 打包编译
yarn build npm run bulid
// - 执行lint
yarn lint npm run lint
// - 执行单元测试
yarn test:unit npm run test
yarn == npm run

3. vue.config.js配置

PS：默认是没有的，需自己新建

3.1 vue.config.js介绍

此部分内容参考Vue-cli配置参考

vue.config.js是一个可选的配置文件，如果项目的（和package.json同级的）根目录中存在这个文件，那么它会被@vue/cli自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵照JSON的格式来写。

这个文件应该导出了一个包含了选项的对象

// vue.config.js
module.exports = {
  // 选项...
}

3.2. 配置代理

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置

devServer

  • Type: Object
    所有webpack-dev-server的选项都支持.注意：
    • 有些值像host、port和https可能会被命令行参数覆写
    • 有些像publicPath和historyApiFallback不应该被修改，因为它们需要和开发服务器的baseUrl同步以保障正常工作

devServer.proxy

  • Type:string | object
    devServer.proxy可以是一个指向开发环境API服务器的字符串：
module.exports = {
devServer: {
proxy: 'http://localhost:4000' //或者 https://incsit.huaxiafinance.com/loan-after
}
}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

vue-cli2.0创建的项目的代理配置方式是修改config/index.js文件中的proxyTable:

22.png

image.png

vue-cli3.0的代理配置，直接将proxyTable中配置copy到devServer.proxy中即可：

module.exports = {
devServer: {
proxy: {
'/hrm/api': {
//target: 'http://192.168.1.209:10751/', // Dev环境
//  target: 'http://192.168.1.238:10751/', // Test环境
// target: 'http://192.168.1.215:10751/', // Rls环境
target: 'http://192.168.1.218:10751/', // 正式环境
changeOrigin: true,
autoRewrite: true,
cookieDomainRewrite: true,
pathRewrite: {
'^/hrm/api/': '/'
}
}
}
}
}

3.3. 配置Webpack其他选项

参考：webpack简单的配置方式

调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象：

module.exports = {
// 其他选项...
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
//......
]
}
}

警告
有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 baseUrl 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

环境变量和模式

模式是 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",
"sit": "vue-cli-service build --mode sit",
"uat": "vue-cli-service build --mode uat",

那么，根目录下 就需要配置如下

微信截图_20190318140926.png

环境加载优先级
为一个特定模式准备的环境文件将会比一般的环境文件拥有更改的优先级。
同一个key: .env.[mode].local > .env.[mode] > .env

在客户端侧代码中使用环境变量

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

console.log(process.env.VUE_APP_SECRET)

也就是说，你申明axios的时候，你就可以通过判断当前的暂存环境变量来判断，现在运行那个
baseUrl or publishPath PS：从 Vue CLI 3.3 起已弃用，请使用[publicPath](https://cli.vuejs.org/zh/config/#publicPath)。

// 举个例子来说
import axios from  'axios'
// axios.defaults.baseURL = baseUrl


let baseUrl ='/api'
switch (process.env.VUE_APP_TYPE) {
case  'development':
baseUrl =  'https://easy-mock.com/mock/5b875b7db762eb26e90eb8f8/huaxiafinance-api/'
break
case  'sit':
baseUrl =  'https://incsit.huaxiafinance.com/huaxiafinance-api/'
break
case  'uat':
baseUrl =  'https://incuat.huaxiafinance.com/huaxiafinance-api/'
break
case  'production':
baseUrl =  'https://inc.huaxiafinance.com/huaxiafinance-api/'
break
}


// 创建axios实例
const service = axios.create({
baseURL: baseUrl, // api的base_url
timeout:  30000 // 请求超时时间
})

修改页面 (opens new window)
Last Updated: 12/20/2021, 5:53:52 AM
最近更新
01
02
03
css垂直居中
 12-17
更多文章>
Theme by Vdoing