VUE基础

介绍

技术 特性 适用场景 说明
VUE - 中文官网
- 教程
- Github

安装 vue

前提条件

  • 安装 node.js

安装 vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 安装最新稳定版
$ npm install vue
$ vue --version

# 安装 vue-cli
$ npm install vue-cli -g

# 初始化项目
$ vue init webpack vue-demo

? Project name vue-demo
? Project description A Vue.js project
? Author iamwlb <iamwanglibing@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

$ cd vue-demo
$ npm install

# 运行 vue
$ npm run dev

多环境

配置多环境

添加 /config/env-config.js,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

'use strict'

const chalk = require('chalk')
/*
* 环境列表,第一个环境为默认环境
* envName: 指明现在使用的环境
* dirName: 打包的路径,只在build的时候有用
* baseUrl: 这个环境下面的api 请求的域名
* assetsPublicPath: 静态资源存放的域名,未指定则使用相对路径
* */
const ENV_LIST = [
{
envName: 'dev',
dirName: 'dev',
baseUrl: 'http://192.168.xx.xx:8000/',
assetsPublicPath:'./'
},
{
envName: 'test',
dirName: 'test',
baseUrl: 'http://192.168.xx.xx:8000/',
assetsPublicPath: './'
},
{
envName: 'pro',
dirName: 'pro',
baseUrl: 'http://webapi.xxx.com/',
assetsPublicPath:'./'
},

]

//获取命令行参数 http://nodejs.cn/api/process.html#process_process_argv
const argv = JSON.parse(process.env.npm_config_argv).original || process.argv
const HOST_ENV = argv[2] ? argv[2].replace(/[^a-z]+/ig,"") : ''
//没有设置环境,则默认为第一个
const HOST_CONF = HOST_ENV ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0]
// 把环境常量挂载到process.env.HOST_ENV方便客户端使用
process.env.BASE_URL = HOST_CONF.baseUrl
// log选中的变量
console.log(chalk.green('当前环境常量:'))
console.log(HOST_CONF)

module.exports.HOST_CONF = HOST_CONF
module.exports.ENV_LIST = ENV_LIST

/build/webpack.base.conf.js:

1
2
3
4
5
plugins: [
new webpack.DefinePlugin({
'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
})
],

多环境运行

1
2
3
4
# 多环境运行
$ npm run dev --[envName]
# 本地调试生产环境
$ npm run dev --pro

多环境打包

1
2
3
4
5
6
7
8
9
10
11
12
# 打包
$ npm run build
## 文件打包位置于项目目录里面的 dist 文件夹内

# 多环境打包
## 输出至dist/[envName]
$ npm run build --[envName]
$ npm run build --pro

# 打包所有环境
## /package.json "script"
"build-all": "npm run build --dev && npm run build --test && npm run build --pro"
坚持原创技术分享,您的支持将鼓励我继续创作!
0%