vue-cli

安装

1 安装 vue-cli

1
2
3

npm install -g @vue/cli
//or
 yarn global add @vue/cli

2 安装 node-gyp 所需编译工具

安装 Visual Studio Community 2017
安装 Python2.7(node-gyp 不支持 3.x)
打开 cmd, 执行如下命令

1 2	npm config set python python2.7 npm config set msvs_version 2017

3 修改镜像地址为阿里源

npm config set registry https://registry.npm.taobao.org/
yarn config set registry https://registry.npm.taobao.org/

// node-sass所需
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

vue create 命令

vue-cli 使用 vue create <projectName>新建项目

1	vue create myApp

注: 在 vue-cli2 中,使用 init 命令新建项目

1 2	vue init <template-name> <projectName> // template-name 为模板名称,一般用webpack模板

如希望在 vue-cli3 中使用 init 命令,则需安装桥接工具

// 安装@vue/cli-init
yarn global add @vue/cli-init
// 创建项目
vue init webpack myApp

创建项目

用 vue create 命令新建项目

1	vue create hello-world

vue-cli 会提示选择默认配置/手动选择配置(上下方向键移动光标回车确定)
这里选择 Manually select features

启用哪些功能(上下方向键移动光标空格选择对应的功能回车确定)

选项说明

Babel   Es6 to Es5
TypeScript      js的超级,强类型
Progressive Web App (PWA) Support   仿原生Web应用
Router      Vue-Router路由管理
Vuex    Vue组件间状态(数据)管理(共享)
CSS Pre-processors      CSS预处理器(SCSS Stylus)
Linter / Formatter      代码风格/错误检查(Eslint Prettier)
Unit Testing    单元测试(Mocha chai)
E2E Testing     ui测试 ?

设置 Vue-Router,是否使用 history 模式,选否

Vue-Router 有两种路径模式, hash 和 history
默认为 hash 模式(用"#"号模拟 url 路径)

hash 模式

// 对应的url
http://127.0.0.1:8080/#/seller

window.location.pathname "/"
window.location.hash // #/seller

history 模式

// 对应的url
http://127.0.0.1:8080/seller

window.location.pathname // /seller
window.location.hash // ""

HTML5 History 模式 | Vue Router

设置 CSS 预处理器,选择 SCSS

设置 EsLint 规范,这里选择 ESLint + Prettier

ESLint with error prevention only // 仅检查语法错误
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

风格标准

是否自动修复代码错误, 选择 Lint on save,仅检查

如何储存配置文件,选择 In dedicated config files

In package.json 选项把 eslintConfig browserslist 等配置保存到 package.json 文件
In dedicated config files 选项把配置保存到单独的文件(如 .eslintrc.js)

储存本次选项配置

项目配置储存在 C:\Users%username%.vuerc 中,可用 vue config 命令查看
下次安装时,用 -p <配置名> 命令使用本次配置

1	vue create projectname -p 1

安装完成后,使用 yarn serve 命令启动

监控配置文件更新

更改 vue.config.js|.eslintrc.js 等配置文件后要手动重启,配置才能生效
如希望自动重启 vue-cli,可以借助 nodemon

先安装 nodemon

1	yarn add nodemon --dev

示例
然后修改 package.json 的配置
vue-cli3

{
  "scripts": {
    "watch": "nodemon --watch vue.config.js --exec yarn serve"
  }
}

vue-cli2

{
  "scripts": {
     "watch": "nodemon --watch build/webpack.dev.conf.js --exec yarn start"
  }
}

watch 参数后的文件名就是 nodemon 所监控的文件.需监控多个文件的话,重复配置多个 watch 参数即可

{
  "scripts": {
     "watch": "nodemon --watch build/webpack.dev.conf.js --watch build/webpack.base.conf.js --exec yarn start"
  }
}

最后用 yarn watch 命令启动服务.当 config 文件被更改时,nodemon 会重新执行参数 exec 后的命令

模拟 JSON|JSONP 数据

编写项目时,可能需要一些假的 api,供 vue 调用
可以通过 express 和 axios,返回虚拟的 api 数据
vue-cli3 vue.config.js 示例

const express = require("express");
const axios = require("axios");

module.exports = {
  devServer: {
    before(app) {
      const apiRoutes = express.Router();
      app.use("/api", apiRoutes);

      app.get("/api/person", (req, res) => {
        res.json({
          name: "aaron",
          age: 20,
        });
      });
      // 上下二者等价
      apiRoutes.get("/person1", (req, res) => {
        res.json({
          name: "aaron",
          age: 20,
        });
      });
      app.get("/api/posts", function(req, res) {
        axios
          .get("https://jsonplaceholder.typicode.com/posts", {
            params: req.query, // 参数,例如 /api/posts?userId=2 ,则 req.query = {userId: '2'}
            headers: {
              // 修改数据头
              referer: "https://jsonplaceholder.typicode.com/",
              host: "jsonplaceholder.typicode.com",
            },
          })
          .then(response => {
            res.json(response.data);
          })
          .catch(err => console.log(err));
      });
    },
  },
};

代理设置

vue-cli 3.x配置跨域代理 - 个人文章 - SegmentFault 思否

如果嫌 Webpack 启动速度慢, 每次修改 api 之后都要重启很浪费时间的话,可以用 express 开一个指向另一个端口的服务(127.0.0.1: 8000),让 webpack 代理'/api/...'部分的 url 到这个 8000 端口

一个 express 服务的例子:

创建 express.js

const express = require("express");
const axios = require("axios");
const path = require("path");

// 端口
const PORT = 8000;
// user-agent
const USER_AGENT =
  "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3487.0 Safari/537.36";

const app = express();
const router = express.Router();
app.use(router);

// 获取歌手信息
app.get("/api/getSingerDetail", function(req, res) {
  let url = "https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg";
  // 请求参数
  let params = req.query;
  axios
    .get(url, {
      // 请求参数
      params: params,
      // 修改headers
      headers: {
        origin: "https://y.qq.com",
        referer: `https://y.qq.com/n/yqq/singer/${params.singermid}.html`,
        "user-agent": USER_AGENT,
      },
    })
    .then(response => {
      // 返回json数据
      res.json(response.data);
    });
});

// 监听8000端口
app.listen(8000, function(err) {
  // 如果出错
  if (err) {
    console.log(err);
    return;
  }
  // 正常启动
  console.log("Listening at http://127.0.0.1:" + PORT);
});

start-express.bat, 用于启动 express.js 的文件

1 2	REM 使用nodemon监控express.js内容变化,自动重启 nodemon --watch main.js --exec node main.js

vue.config.js 配置

// 如果非生产环境,则代理'/api'到'http://127.0.0.1:8000'
module.exports = {//...}
if (process.env.NODE_ENV !== "production") {
  module.exports.devServer.proxy = {
    '/api': {
      target: 'http://127.0.0.1:8000'
    }
  }
}

Prettier 规则设置

本文用 vue create 创建项目时,eslint 选择的是 ESLint + Prettier

Prettier 的默认规则和 vue 有些不同(例如 vue 不建议用分号结尾),建议按照自己的代码风格更改规则设置
Prettier 的规则应放在根目录下.prettierrc.js 文件中(没有的话需自己建一个),而不是.eslintrc.js

示例

module.exports = {
  semi: false, // 禁用分号结尾
  singleQuote: true, // 使用单引号,而非双引号
};

注意修改.prettierre.js 配置后,需重启 webpack 才能生效

更多设置见 prettier 官方文档

路径别名

vue-cli3 在 vue.config.js 设置

const path = require("path");
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("common", path.join(__dirname, "src/common"))
      .set("api", path.join(__dirname, "src/api"));
  },
};

vue-cli2 则在 build/webpack.base.conf.js 中设置

module.exports = {
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
      "@": resolve("src"),
      common: resolve("src/common"),
    },
  },
};

style 中图片的路径别名

假设该 vue 项目有以下目录结构

- src
    - common
         - img
            - bg.jpg
    - component
        - group
            - group.vue

且该 vue 项目在 vue.config.js 中声明了路径别名 common

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set("common", path.join(__dirname, "src/common"));
  },
};

但要是在 group.vue 里用如下方式载入 bg.jpg,则会报错提示找不到图片

<style>
div {
  background-image: url('common/img/bg.jpg');
}
</style>

这是因为 vue-html-loader 和 css-loader 会将"非根路径"转化为"相对路径",如需将其视为模块,则需要在路径前加上~号

<style>
div {
  background-image: url('~common/img/bg.jpg');
}
// or

div {
  background-image: url('~@/common/img/bg.jpg');
}
</style>

另外,在<script>标签中 import 载入的的 CSS 内,不需要这样做

Vue2 模板中的图片地址如何使用 webpack 定义的别名? - 前端开发 - SegmentFault 思否

基础路径

注:
Vue CLI 3.3 开始 baseUrl 被抛弃,使用 publicPath 代替. 配置参考 | Vue CLI

vue-cli 默认页面会部署在根路径下, 例如: www.example/index.html
如果需部署在其他子路径下, 如 www.example/exp/index.html
可以使用 baseUrl 属性更改基础路径配置

module.exports = {
  baseUrl: "./",
};
// or
module.exports = {
  baseUrl: "exp",
};

在 js 中,可通过环境变量 BASE_URL 来获取基础路径. 环境变量和模式 | Vue CLI

1	process.env.BASE_URL

如果需要用 import 载入 scss,同时又希望把图片等资源放在 public 文件夹下.则可以设置一个全局变量供 scss 使用.
(生产环境和线上环境的 url 子路径可能不同,最好不要把基础路径直接写在 scss 里)

const baseUrl = process.env.NODE_ENV === "production" ? "/Lactuca/" : "/";

module.exports = {
  baseUrl: baseUrl,
  css: {
    loaderOptions: {
      sass: {
        data: `$baseUrl: "${baseUrl}";`,
      },
    },
  },
};

使用方式

1
2
3

body {
  background-image: url($baseUrl+"img/bg.jpg");
}

vue-cli3 官方文档 baseUrl

判断环境模式

常用的模式有

development 对应 yarn serve
production 对应 yarn build
在 vue.config.js 中,可用 process.env.NODE_ENV 变量判断当前的环境模式

module.exports = {
  baseUrl: process.env.NODE_ENV === "production" ? "Lactuca" : "/",
  productionSourceMap: process.env.NODE_ENV === "production" ? false : true,
};

vue-cli3 官方文档环境变量和模式

使用 Vscode 调试 Vue 程序

首先, 安装 Vscode 扩展Debugger for chrome

安装完成后, 依照上图所示, 点击 Vscode 左侧的 Debug 按钮,进入调试页面.
然后点击左上方齿轮图标, 在弹出的 launch.json 中填入如下配置:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      // 直接安装chrome不需要设置runtimeExecutable
      // 而便携式的chromium则需要配置runtimeExecutable为chrome.exe文件的所在路径
      "runtimeExecutable": "C:/chromium/chrome.exe",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    }
  ]
}

在 VS Code 中调试 — Vue.js

开启 source-map

有时候不知道为什么 source-map 没有被自动启动, 这时就需要设置 configureWebpack 来激活 source-map.
Source-maps not enabled by default · Issue #1806 · vuejs/vue-cli · GitHub

vue.config.js:

module.exports = {
  devServer: {},
  configureWebpack: {
    devtool: "source-map",
  }
};

开启/不开启 source-map 的区别是什么?
如下图所示,在 Vscode 安装 Debugger for chrome, 然后设置一个断点.
断点.PNG

然后 start debugging 按钮, 观查开启/关闭 source-map 时, 断点代码的区别
已开启 source-map:
开启了.PNG
未开启 source-map:
未开启source-map.PNG
通过上面两张图可知, 开启 source-map 时, 中断位置的代码和原始代码一致.
而未开启 source-map 中断位置的代码是被编译过的,基本没法 debug.