第7章 Vue 开发环境

第7章 Vue 开发环境

7.1 Vue CLI 脚手架

Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，可以自动生成 Vue.js + webpack 的项目模板

2.x 版本需要借助 webpack 构建项目，3.x 已经无需

• 卸载旧版 vue-cli，安装新版 @vue/cli

  npm uninstall vue-cli -g
  npm install @vue/cli@3.10 -g
  

  191.792s

vue create

vue create hello-vue

别改了！！！

啊这还是按默认的来吧，手动配置后面的看不太懂，都回车过去了（后面 GUI 方式创建就是按照默认来的）

在对应目录下启动项目

npm run serve

用 GUI 创建项目

以图形化的界面引导开发者去进行项目的创建

mkdir vue-ui	// 然后进入到该目录下再创建项目，我下面截图没有用到这个目录，搞错了，不过问题不大
vue ui

7.2 插件 & CLI 服务 & 配置文件

CLI 插件

@vue/cli-plugin- 开头，内置插件

安装插件

vue add router
vue add vuex
vue add vuetify		// 非内置的， plugins 目录中会自动生成其配置文件

CLI 服务

package.json > script > serve : vue-cli-service 就是 CLI 服务
npm run serve
npx vue-cli-service		// 运行 CLI 服务，后面有提示选项 save、build 等

配置文件

vue.config.js	// 自己创建的

$$演示如何配置devServer的before函数请求本地接口数据$$

1. 创建 data 目录，创建 good.json 文件

{
    "last_id": 0,
    "list": [
        {
            "order_id": "1",
            "foods": [{
                "name": "鲜枣馍",
                "describe": "等 4 件商品",
                "price": "12.00",
                "date": "2020-11-29",
                "time": "11:30",
                "money": 48
            }],
            "taken": false
        },
        {
            "order_id": "1",
            "foods": [{
                "name": "芝士火腿包",
                "describe":"等 2 件商品",
                "price": "14.00",
                "date": "2020-11-27",
                "time": "12:30",
                "money": 28
            }],
            "taken": true
        }
    ]
}

2. 创建 /hello-vue/vue.config.js 文件，配置 devServer 选项的 before 函数

const goods = require('./data/goods.json')

module.exports = {
    devServer: {
        port: 8081,		// 端口号
        open: true,		// 自动打开浏览器
        before: app => {
            app.get('/api/goods', (req, res) => {
                res.json(goods)
            })
        }
    }
}

执行 npm run serve，打开后访问 http://localhost:8081/api/goods

配置多页应用

Vue CLI 支持用 vue.config.js 的 pages 选项构建多页（单页 SPA，多页 MPA）

看完对比后感觉多页应用不如单页应用啊

// 配置 vue.config.js
module.exports = {
    pages: {
        index: {
            entry: 'src/index/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        },
        subpage: 'src/subpage/main.js'
    },
    devServer: {
        port: 8080,
        open: true
    }
}

// 安装插件
vue add router		// 注意询问 history 模式时候选 No ！！！
vue add vuex

在 src 目录下创建 index 目录，把 assets、views、App.vue、main.js、router 移动到 index 目录中

改 main.js

import store from '../store'

创建 src\subpage 目录，把 src\index 目录下的文件复制到 subpage 目录中

改 src\store\index.js

export default new Vuex.Store({
  state: {
    tip: '页面测试'
  },

改 index\views\Home.vue

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  mounted() {
    window.console.log('this is a 默认页面的主页:' + this.$store.state.tip)
  }
}

改 subpage\views\Home.vue，位置同上

  mounted() {
    window.console.log('this is a 多页面测试的主页: ' + this.$store.state.tip)
  }

运行后，改地址栏为 http://localhost:8080/subpage.html#/

7.3 环境变量 & 模式 & 静态资源管理

环境变量

• .env：所有环境载入
• .env.local：只在本地有效
• .env.[mode]：指定模式下有效，高优先级（启动前存在的拥有最高优先级）
• .env.[mode].local：只在本地有效

模式 [mode]

• development ：用于 vue-cli-service serve，即开发环境使用
• production ：用于 vue-cli-service build 和 vue-cli-service test:e2e，正式环境使用
• test ：用于 vue-cli-service test:unit

$$修改模式mode$$

改 package.json，加一行 stage 模式，用来模拟预上线环境

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "stage": "vue-cli-service build --mode stage"
},

创建 hello-vue\.env.stage 文件（我的项目根目录是 hello-vue）

NODE_ENV='production'
VUE_APP_CURRENTMODE='stage'
outputDir='stage'

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

module.exports = {
    outputDir: process.env.outputDir,
}

然后运行 npm run stage

会生成 hello-vue\stage

静态资源管理

1. 使用相对路径引入的静态资源文件，会被 webpack 解析为模块依赖（有一定优势）
2. 保存在 public 目录下的静态资源不会经过 webpack 处理，会直接被简单复制，引入时使用绝对路径

$$相对/js导入+被webpack处理，绝对/public中+不被webpack处理$$

• 经过 webpack 处理 ：在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用的资源
• 不经过 webpack 处理 ：存放在 public 目录下或通过绝对路径引用的资源，会直接被复制一份，不做编译和压缩的处理

---

$$End.$$