Vue.js:渐进式 JavaScript 框架,相关资料整理

// TODO: To be updated…

1. 使用 vue-cli 构建新项目

1.1 安装 vue-cli

安装vue-cli

# 安装 Vue CLI
> npm install -g @vue/cli

# 或者使用 yarn
> npm i -g yarn
> yarn global add @vue/cli

# 验证 Node.js 与 vue-cli 版本
> node -v
v12.13.0
> npm -v
6.13.0
> vue -V
@vue/cli 4.0.5

> vue
Usage: vue <command> [options]                                                                                                                                                  u

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.

1.2 构建新项目

构建一个新项目

> vue create my-project

或者使用可视化界面

> vue ui

1.3 目录结构

vue-cli脚手架生成的项目目录结构大致如下所示:

├── node_modules     # 项目依赖包目录
├── public
│   ├── favicon.ico  # ico 图标
│   └── index.html   # 首页模板
|
├── src 
│   ├── assets/      # 样式图片目录
│   ├── components/  # 组件目录
│   ├── views/       # 页面目录
│   ├── App.vue      # 父组件
│   ├── main.js      # 入口文件
│   ├── router.js    # 路由配置文件
│   └── store.js     # vuex 状态管理文件
|
├── .gitignore       # git 忽略文件
├── .postcssrc.js    # postcss 配置文件
├── babel.config.js  # babel 配置文件
├── package.json     # 包管理文件
└── yarn.lock        # yarn 依赖信息文件

下图摘自 Vue 项目构建与开发入门 - 劳卜 | 掘金小册

2. 包管理工具与配置项

2.1 npm 与 package.json

  • npmNode Package Manager 的缩写
  • 也是目前世界上最大的开源库生态系统

包管理文件package.json的内容大致如下:

详细的package.json文件配置项可以参考:npm-package.json | npm Documentaion

{
    "name": "my-project", 
    "version": "0.1.0", 
    "private": true, 
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "vue": "^2.5.16",
        "vue-router": "^3.0.1",
        "vuex": "^3.0.1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.0.0-beta.15",
        "@vue/cli-service": "^3.0.0-beta.15",
        "less": "^3.0.4",
        "less-loader": "^4.1.0",
        "vue-template-compiler": "^2.5.16"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ]
}

2.2 npm 常用命令

在项目的构建和开发阶段,常用的npm命令有:

# 生成 package.json 文件(需要手动选择配置)
npm init

# 生成 package.json 文件(使用默认配置)
npm init -y

# 一键安装 package.json 下的依赖包
npm i

# 在项目中安装包名为 xxx 的依赖包
npm i xxx

# 在项目中安装包名为 xxx 的依赖包(配置在 dependencies 下)
npm i xxx --save

# 在项目中安装包名为 xxx 的依赖包(配置在 devDependencies 下)
npm i xxx --save-dev

# 全局安装包名为 xxx 的依赖包
npm i -g xxx

# 运行 package.json 中 scripts 下的命令
npm run xxx

比较陌生但实用的有:

# 打开 xxx 包的主页
npm home xxx

# 打开 xxx 包的代码仓库
npm repo xxx

# 将当前模块发布到 npmjs.com,需要先登录
npm publish

2.3 yarn 常用命令

yarn 是由 Facebook 推出并开源的包管理工具,具有速度快、安全性高、可靠性强等优势

yarn的常用命令如下:

# 生成 package.json 文件(需要手动选择配置)
yarn init

# 生成 package.json 文件(使用默认配置)
yarn init -y

# 一键安装 package.json 下的依赖包
yarn

# 在项目中安装包名为 xxx 的依赖包(配置在 dependencies 下),同时 yarn.lock 也会被更新
yarn add xxx

# 在项目中安装包名为 xxx 的依赖包(配置在配置在 devDependencies 下),同时 yarn.lock 也会被更新
yarn add xxx --dev

# 全局安装包名为 xxx 的依
yarn global add xxx

# 运行 package.json 中 scripts 下的命令
yarn xxx

# 查看 yarn 配置项
yarn config list

比较陌生但实用的有:

# 列出 xxx 包的版本信息
yarn outdated xxx

# 验证当前项目 package.json 里的依赖版本和 yarn 的 lock 文件是否匹配
yarn check

# 将当前模块发布到 npmjs.com,需要先登录
yarn publish

2.4 第三方插件配置

例如在package.json中的browserslist配置项,其主要作用是在不同的前端工具之间共享目标浏览器和 Node.js 版本

"browserslist": [
    "> 1%",            // 表示包含所有使用率 > 1% 的浏览器
    "last 2 versions", // 表示包含浏览器最新的两个版本
    "not ie <= 8"      // 表示不包含 ie8 及以下版本
]

也可以单独写在.browserslistrc文件中:

# Browsers that we support 
> 1%
last 2 versions
not ie <= 8

或者在项目终端运行如下命令查看:

> npx browserslist
and_chr 78
and_ff 68
and_qq 1.2
and_uc 12.12
android 76
baidu 7.12
bb 10
bb 7
chrome 78
chrome 77
chrome 76
edge 18
edge 17
firefox 70
firefox 69
ie 11
ie 10
ie_mob 11
ie_mob 10
ios_saf 13.0-13.2
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 46
op_mob 12.1
opera 64
opera 63
safari 13
safari 12.1
samsung 10.1
samsung 9.2

2.5 vue-cli 包安装

除了使用npmyarn命令对包进行安装和配置之外,vue-cli3.0版本开始还提供了专属的vue add命令

  • 该命令安装的包是以@vue/cli-plugin或者vue-cli-plugin开头的包
  • 即只能安装 Vue 集成的包
# vue-cli 会将 eslint 解析为 @vue/cli-plugin-eslint
vue add eslint

注意:不同于npmyarn的安装,vue add不仅会将包安装到项目中,还会改变项目的代码或文件结构

另外vue add中还有两个特例:

# 安装 vue-router
vue add router

# 安装 vuex
vue add vuex

这两个命令会直接安装vue-routervuex并改变你的代码结构,使你的项目集成这两个配置。

3. Webpack

3.1 与 vue-cli 2.x 的差异

vue-cli 3.x提供了一种开箱即用的模式,无需配置webpack即可运行项目。并且还提供了一个vue.config.js文件来满足开发者对其封装的webpack默认配置的修改:

// TODO: To be updated…


参考资料

1. JavaScript

2. Node.js

教程
npm
axios

3. Vue

官方文档
开发教程
开源项目
MVVM
ESLint
Vue.js + Go
Vue.js + Element-ui

4. UI 框架

Vue
React

5. Element-ui

跨域访问
table 布尔值的回填

先在<el-table-column>中指定:formatter

<el-table :data="rows" ref="datagrid" border="true" highlight-current-row="true" style="width: 100%">
    <el-table-column prop="tableId" 
        label="表id" 
        :show-overflow-tooltip="true">
    </el-table-column>
    <el-table-column prop="pk" 
        label="是否为主键" 
        :formatter="formatBoolean" :show-overflow-tooltip="true">
    </el-table-column>    
</el-table>

之后在methods中添加formatBoolean

// 布尔值格式化:cellValue为后台返回的值
formatBoolean: function (row, column, cellValue) {
    var ret = '';   //你想在页面展示的值
    if (cellValue) {
        ret = "是"; //根据自己的需求设定
    } else {
        ret = "否";
    }
    return ret;
},

参见 Element-ui 中 Table 表中 el-table-column 列数据的布尔值回填 | CSDN

table 表格内容格式化

设置formatterfilter,参见:

table 表格筛选

坑在于<el-table-column>要加propcolumn-key,参见:

table 多选

先手动添加一个<el-table-column>,并设置其type属性为selection

<el-table-column type="selection" width="55" />

添加一个<el-button>,方便清除所有选择:

<el-button type="primary" @click="toggleSelection()">取消选择</el-button>

最后在methods中实现toggleSelection()

toggleSelection(rows) {
  let selectedRows = this.$refs.userTable.store.states.selection;

  selectedRows.forEach(row => {
    console.log("id: ", row.id, " name: ", row.name);
  });

  if (rows) {
    rows.forEach(row => {
      this.$refs.userTable.toggleRowSelection(row);
    });
  } else {
    this.$refs.userTable.clearSelection();
  }
}

多选的行数据这样获取:

let selectedRows = this.$refs.userTable.store.states.selection;

参见:

button 动态设置禁用

设置<el-button>:disabled

参见 vue element 表格如何动态设置按钮禁用状态?|SegmentFault

<template slot-scope="scope">  //这里需要注意一下
    <el-button type="primary" 
        :disabled="scope.row.state == '已完成'" 
        size="small" 
        @click="dialogFormVisible = true">
        操作
    </el-button>
</template>
msgbox 的关闭

调用done()关闭:

参见 如何关闭 element-ui 中的 $msgbox | SegmentFault

this.$msgbox({
  title: '用户下线',
  message: '是否下线当前用户?',
  showCancelButton: true,
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  beforeClose: (action, instance, done) => {
    if (action === 'confirm') {
      done()
    } else {
      done()
    }
  }
}).then(() => {
  const axiosIns = axios.create({
    baseURL: 'http://localhost:8080/api/v1',
    timeout: 3000
  })
  axiosIns
    .delete(`login/${this.list[index].id}`)
    .then(res => {
      console.log(res)
    })
    .catch(err => {
      console.error(err)
    })
  this.list[index].online = false
  this.$message({
    message: `用户 ${this.list[index].id} 已下线`,
    type: 'success',
    duration: 2000,
    showClose: true
  })
})
Excel 表格

参见:

6. 相关文章

  1. Bootstrap 中文网
  2. 前端面试题:JS 中的 let 和 var 的区别 | 博客园
  3. Vue.js:轻量高效的前端组件化方案 - 尤雨溪 | CSDN
  4. curl 的用法指南 | 阮一峰