delphi7无法编译已经使用的单元怎么解决_vue-cli@3.0 使用及配置说明

使用vue-cli3已经有相当一段时间了，一直没怎么去注意其中的配置，所以趁着这段时间总结下应用过程中的一些经验，本文是从安装到开发使用的一个过程讲解，也可以说是新手向的文章，文字有点多，请耐心观看。

(一)安装：

1、下载安装node: 登陆node官网 并选择自己合适的node版本进行安装；

2、安装vue-cli脚手架工具

npm install -g @vue/cli# OR# 推荐使用npm install -g yarn # 如果已有安装，此步骤不需要yarn global add @vue/cli 

(二)创建一个项目：

vue create my-project# ORvue ui

• 选择合适的配置

# 版本信息Vue CLI v3.7.0 ? Please pick a preset:# 基础配置 vue-cli3-demo (vue-router, vuex, sass, babel, typescript, unit-mocha) default (babel, eslint)# 自定义配置，这里我们选择自定义选项，点击回车> Manually select features

• 选择需要的插件及编译工具

? Check the features needed for your project:# 代码转换，可以让你更好的书写前沿技术 (*) Babel# JavaScript 的一个超集，好东西用起来 (*) TypeScript# PWA支持,不要求使用可以不选 ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex# css预编译器 (*) CSS Pre-processors# 代码格式化 (*) Linter / Formatter# 书写单元测试用的，不要求使用可以不选>(*) Unit Testing ( ) E2E Testing

• 接下来的配置选项

# 是否使用class风格进行组件开发? Use class-style component syntax? Yes# 使用 babel 对 TypeScript 代码进行编译转换? Use Babel alongside TypeScript for auto-detected polyfills? Yes? Use history mode for router? (Requires proper server setup for index fallback in production) Yes# 选择css预编译，这里我们选择Sass/SCSS? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)# 选择代码格式化配置? Pick a linter / formatter config: Standard# 代码检查方式? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)Lint on save# 选择单元测试工具? Pick a unit testing solution: Mocha# 是否将配置放在单独的文件中? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files# 是否将此次配置保存? Save this as a preset for future projects? No

• 最后

cd my-projectnpm run installnpm run serve# OR 推荐使用yarn installyarn serve

(三)目录结构

(四)环境变量配置

环境变量说明

.env # 在所有的环境中被载入.env.local # 在所有的环境中被载入，但会被 git 忽略.env.[mode] # 只在指定的模式中被载入.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略

1. 新建环境变量 .env.development.test 用于测试环境 并添加如下代码

NODE_ENV='development'VUE_APP_URL='你的测试环境域名'

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

console.log(process.env.VUE_APP_URL)

1. 修改 package.json,并在scripts里面添加如下代码

"serve:test": "vue-cli-service serve --mode development.test