Vue-CLI

# 介绍

基于 Vue.js 进行快速开发的完整系统 Vue-CLI (opens new window)

# 安装

// 1.安装node，查看node和npm版本
node -v npm -v
// 2.安装webpack
npm install webpack -g 
webpack -v  // 查看版本
// 3.安装Vue
npm install vue
// 4.安装vue-cli
npm install vue-cli -g
// 5.脚手架安装
vue init webpack 项目名称  --vue-cli 2.x创建脚手架 
vue create 项目名称        --vue-cli 3.x创建脚手架

1
2
3
4
5
6
7
8
9
10
11
12

# 配置

# 1.安装less

npm install less less-loader --save-dev

注意

若报错loaderContext.getResolve is not a function，表示版本号太高
更换低版本即可

# 2.移动端项目配置

设置视口

<!-- 移动端放大缩小是无效的-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!-- pc端页面换成移动端同比缩小 -->
<meta name="viewport" content="user-scalable=yes">
<!-- 机自动将网页中的电话号码显示为拨号的超链接 -->
<meta name="format-detection" content="telephone=no"/>

1
2
3
4
5
6

移动端浏览器300毫秒点击延迟

用户在iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待300毫秒，以判断用户是否再次点击了屏幕

解决办法
fastclick (opens new window)

//1.在index.html中引用
<script src="/static/js/fastclick.js"></script>
<script>
  if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function () {
      FastClick.attach(document.body);
    }, false);
  }
// 2.也可以在main中引用
import fastclick from 'fastclick'
fastclick.attach(document.body)

1
2
3
4
5
6
7
8
9
10
11

移动端调试工具Vconsole

<!-- 在index.html中引用 -->
<script src="https://cdn.staticfile.org/vConsole/3.2.0/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>

1
2
3
4
5

# 3.全局API环境变量

注意

必须以VUE_APP开头
访问的时候process.env.VUE_APP_RES进行访问
process.env.NODE_ENV(用于判断当前是什么环境)

.env              // 全局默认配置文件，不论什么环境都会加载合并
.env.development  // 开发环境下的配置文件
.env.production   // 生产环境下的配置文件

1
2
3

# 4.mixin混入

mixin是vue提供的一种方式来分发vue组件的可复用功能，可以将相同的方法、字段等抽离出来，避免重复定义。混入分为局部混入和全局混入，一个mixin对象可以包含任意组件选项，data、methods、mounted等。

局部混入

const mixin = {
  data() {
    return {
      msg: "我是张三"
    }
  },
  methods: {
    mixinTest() {
      console.log(this.msg)
    }
  }
}
export default mixin;
// 需要的页面中引用即可
mixins:[mixin]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

全局混入在main.js中引用并注入即可

import mixin from '@/utils/mixins'
Vue.mixin(mixin)

1
2

注意事项

mixin中定义的方法和参数在各组件中不共享
mixin中定义的生命周期函数会比引用组件的生命周期先执行
mixin对象里的(components、methods 、computed、data)这些选项，混入组件时选项会被合并，重名冲突时优先采用组件中定义的数据
如果同时引入多个mixin对象, 执行顺序和引入顺序一致

# 部署

Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

# 1.hash模式

根路径

vue.config.js中配置

// publicPath使用默认配置即可

nginx配置

http {
  server{
    root /var/www/dist;  // 项目的根目录
  }
}

1
2
3
4
5

子路径

vue.config.js中配置

//使用相对路径，不然页面报错找不到资源
publicPath: process.env.NODE_ENV === 'production' ? '/dist' : '/',

1
2

nginx中配置

server{
  root /var/www/dist; // 可配置可不配置(自定义路由中)
  location /dist {
    alias /var/www/dist/;
    index index.html index.htm;
  }
}

1
2
3
4
5
6
7

# 2.history模式

根路径

vue.config.js中配置

// 不需要配置publicPath，因为项目是直接在根目录中

router中配置

// 将路由模式更改为history模式
var router = new VueRouter({
  mode:'history',
  routes: routes
})

1
2
3
4
5

nginx配置

http {
  server{
    root /var/www/my-app/dist;
    // history模式中切换路由后，然后刷新页面，会出现404
    // 原因： 因为vue是单页面应用，只有一个index.html的页面，当切换到别的路径时，
    // 别的页面是不存在在，所以当刷新的时候会造成404
    // 解决：
    location /{
        try_files $uri $uri/ /index.html;
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

子路径

router中配置

// 将路由模式更改为history模式
var router = new VueRouter({
  mode:'history',
  // 根路径中配置不需要配置base,因为根路径默认为'/',
  // 若部署到子路径中, 和publicPath配置的名字一样
  base: process.env.BASE_URL,
  routes: routes
})

1
2
3
4
5
6
7
8

vue.config.js中配置

publicPath: process.env.NODE_ENV === 'production' ? '/user' : '/',

nginx配置

http {
  server{
    root /var/www/dist;
    location /user {
      alias /var/www/myapp.com/user/dist;
      index index.html index.htm;
      try_files $uri $uri/ /user/index.html;
    }
  }
}

1
2
3
4
5
6
7
8
9
10

# 3.自动化部署脚本

安装

npm install scp2 --save-dev   // scp2自动化部署
npm i --save-dev cross-env cross-env  // 运行跨平台设置和使用环境变量(Node中的环境变量)的脚本

1
2

根目录创建deploy文件

config.js

/* 读取开发变量 */
const SERVER_ENV = process.env.NODE_ENV;
/* 定义服务器账号*/
const SERVER_LIST = [{
  env: 'dev',
  name: '测试环境',
  domain: '个人vue测试环境项目',
  host: '',          //ip
  port: 22,          //测试服务器端口号(一般为21或22)
  username: 'root',  //服务器账号
  password: 'xxxxx', //服务器密码
  path: ''           //服务器部署根目录
},
{
  env: 'prod',
  name: '个人vue生产环境项目',
  domain: 'xxx.xxx.xxx',
  host: 'xxxxxx',         //ip
  port: 22,               //生产服务器端口号
  username: 'root',       //服务器账号
  password: 'xxxxxx',     //服务器密码
  path: ''                //服务器部署根目录
}]
const SERVER_ITEM = SERVER_LIST.find(item => item.env == SERVER_ENV)//选择部署服务器
module.exports = SERVER_ITEM;

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

config.js

const scpClient = require('scp2');
const ora = require('ora');      //终端微调器
const chalk = require('chalk');  // 颜色插件
const server = require('./config');
const spinner = ora(
  '正在发布到' +
    (process.env.NODE_ENV === 'dev' ? '测试' : '生产') +
    '服务器...'
);
spinner.start();
scpClient.scp(
  './dist',
  {
    host: server.host,
    port: server.port,
    username: server.username,
    password: server.password,
    path: server.path
  },
  function(err) {
    spinner.stop();
    if (err) {
      console.log(chalk.red('发布失败.\n'));
      throw err;
    } else {
      console.log(
        chalk.green(
          'Success! 成功发布到' +
            (process.env.NODE_ENV === 'dev'
              ? '测试'
              : '生产') +
            '服务器! \n'
        )
      );
    }
  }
);

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

package.json中配置命令

// npm run deploy:test 开发环境
// npm run deploy:prod 生产环境
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "deploy:test": "npm run build && cross-env NODE_ENV=dev node ./deploy",
    "deploy:prod": "npm run build && cross-env NODE_ENV=prod node ./deploy"
  },

1
2
3
4
5
6
7
8
9

#CLI

上次更新: 2024/10/09, 16:59:47

← 路由常见问题→