VUE CLI环境搭建文档

VUE CLI环境搭建文档

1.安装Node.js

下载地址

https://nodejs.org/zh-cn/download/

2.全局安装VUE CLI

win+R键打开运行cmd窗口输入一下代码，由于npm官方镜像访问网速问题，我们选择使用淘宝的镜像源

npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli 
npm install -g @vue/cli-service-global
npm install -g @vue/cli-service

2.1 命令行

用法：create [options] <app-name>
创建一个由 `vue-cli-service` 提供支持的新项目
选项：
  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

2.2 可视化工具

vue ui

3.安装Vue router

3.1 命令

npm install vue-router

3.2 修改main.js增加一下代码，添加vue-router的引用

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  base: '/ap',    //解决发布子站点后空白页面的问题,如果发布在子站点或者子目录中时，需要设置
  mode: 'history',//路由模式：history为直接路由访问，hash为#号方式（注：微信公众号访问中转发hash模式存在截断问题）
  routes: routers //routers为router.js文件中配置的路由
})
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

3.3 增加router.js文件，并添加相关的路由设置内容

import Home from './components/HelloWorld.vue'
import defaults from './components/Default.vue'
const routers = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/:id',//但斜杠为默认首页路径，可以通过冒号来设置对应的参数名称，组件中可以通过$route.params.id来获取对应的参数名称
    component: defaults
  }
]
export default routers

3.4 修改App.Vue文件，增加router-view组件

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

4.编译环境配置

4.1 模式配置文件

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

为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。

4.2 环境变量

配置文件中的环境变量必须以VUE_APP_ 开头，一个环境文件只包含环境变量的“键=值”对

VUE_APP_APISERVER="http://127.0.0.1/api/"

4.3 模式

模式是 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

4.4 使用环境变量

如需在 .js 文件中使用则，在需要在文件开头引入vue对象

"use strict";
import Vue from 'vue';

在页面可以通过process.env 来调用相应的环境变量，如：

console.log(process.env.VUE_APP_SECRET)

5 编译

开发环境（此编译对应development 模式，加载对应的 .env.development 配置文件）

npm run serve

生产环境（此编译对应production 模式，加载对应的 .env.production 配置文件）

npm run build