Vue开发环境

1、Vue CLI脚手架工具

1、先卸载旧版的的vue-cli

npm uninstall vue-cli –g

2、npm方式全局安装@vue/cli脚手架

npm install @vue/cli@3.10 –g

vue –V 查看版本，显示版本号则安装成功

3、使用vue create命令创建项目

vue create hello-vue（项目名）

=>重新执行vue create hello-vue后，交互符界面提示用户选取一个preset（预设），default是默认项，包含基本的babel+eslint设置，适合快速创建一个新项目。Manually select features表示手动配置，提供可供选择的npm包，更适合面向生产的项目，在实际工作中推荐使用> default (babel, eslint)

=>选择需要的插件
按空格键可以选择某一项，a键全选，i键反选。下面对这些选项的作用进行解释，具体如下。
Babel：Babel配置（Babel是一种JavaScript 语法的编译器）
TypeScript：一种编程语言
Progressive Web App (PWA) Support：渐进式Web应用支持
Router：vue-router
Vuex：Vue状态管理模式
CSS Pre-processors：CSS预处理器
Linter / Formatter：代码风格检查和格式化
Unit Testing：单元测试
E2E Testing：端到端（end-to-end）测试

=>执行项目

cd hello-vue
npm run serve

4、GUI创建项目

=>创建目录

mkdir vue-ui

=>执行cd vue-ui命令进入目录中，执行如下命令来创建项目：

vue ui

=>按界面步骤操作即可

2、插件

1、CLI插件

vue add (插件)  --- 安装插件   

2、CLI服务
在项目目录下使用npx命令可以运行vue-cli-service

npx vue-cli-service

显示：

Usage: vue-cli-service <command> [options]
Commands:
  serve	  start development server              启动服务
  build	  build for production 	              生成用于生产环境的包
  inspect	  inspect internal webpack config   审查webpack配置
  lint	  lint and fix source files	              lint并修复源文件

运行帮助信息

npx vue-cli-service help serve

Usage: vue-cli-service serve [options]
Options:
  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将URL复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

build用法即帮助信息

Usage: vue-cli-service build [options] [entry|pattern]
Options:
  --mode		 指定环境模式 (默认值：production)
  --dest       	 指定输出目录 (默认值：dist)
  --modern     	 面向现代浏览器带自动回退地构建应用
  --target     	 app | lib | wc | wc-async (默认值：app)
  --name       	 库或Web Components模式下的名字
  --no-clean	 在构建项目之前不清除目标目录
  --report     	 生成report.html以帮助分析包内容
  --report-json	 生成report.json以帮助分析包内容
  --watch         监听文件变化

3、 配置文件

vue-cli3引入了全局配置文件的功能，如果项目的根目录中存在vue.config.js文件，就会被@vue/cli-service模块自动加载。因此，vue.config.js是一个可选的配置文件
(直接创建文件vue-config.js，导入需要配置的文件进行配置即可)

例：

4、配置多页应用
在创建好的hello-vue项目中，新建vue.config.js文件

在src目录下创建页面目录，把assets、views、App.vue、main.js、router移动到index目录中
assets：存放图片资源
views：存放About.vue、Home.vue
App.vue：页面渲染组件
main.js：页面主入口文件
router：存放路由文件

修改src\index\main.js文件，将store的路径改为上级目录

import store from '../store'

之后在创建一个页面目录，放入一样的目录文件夹，在浏览器打开不同的网址即可以打开不同的页面内容

4、环境变量和模式

1、环境变量

不同环境下变量的不同值

CLI 3构建的项目目录中，移除了config和build这两个配置文件，并在项目根目录中定义了4个文件，用来配置环境变量，具体如下。
.env：将在所有的环境中被载入
.env.local：将在所有的环境中被载入，只会在本地生效，会被git忽略
.env.[mode]：只在指定的模式下被载入。如.env.development用来配置开发环境的配置。关于模式具体会在下一节中讲解
.env.[mode].local：只在指定的模式下被载入，与.env.[mode]的区别是，只会在本地生效，会被git忽略

2、模式 （即环境）
默认情况下，一个Vue CLI项目有3种模式，具体如下。
development：用于vue-cli-service serve，即开发环境使用
production：用于vue-cli-service build和vue-cli-service test:e2e，即正式环境使用
test：用于vue-cli-service test:unit使用

自定义模式
1、打开package.json文件，找到scripts部分，通过“–mode”选项来修改模式。

 "stage": "vue-cli-service build --mode stage" // 新增stage模式

2、然后在项目根目录下创建.env.stage文件

3、然后在vue.config.js文件使用环境变量，指定输出目录为环境变量配置的stage目录

  outputDir: process.env.outputDir  

4、保存上述代码，执行npm run stage命令，就可以看到在项目根目录下生成了stage目录

3、静态资源管理
静态资源的处理不仅和public目录有关，也和引入方式有关。根据引入路径的不同，有如下处理规则。
如果URL是绝对路径，如/images/logo.png，会被保持不变
如果URL以.前缀开头，会被认为是相对模块请求，根据文档目录结构进行解析
如果URL以~前缀开头，其后的任何内容会被认为是模块请求，表示可以引用node_modules里的资源，如<img src="~some-npm-package/foo.png">
如果URL以@开始，会被认为是模块请求，因为Vue CLI的默认别名@表示“/src”（仅作用于模板中）