初探前端框架 Vue2 之四

发表于 更新于 阅读次数： 评论数： 本文字数： 857 阅读时长 ≈ 1 分钟

大纲

Vue CLI 安装

CLI 是 Command-Line Interface (命令行界面) 的缩写，俗称脚手架。Vue CLI 是一个由 Vue 官方提供的、快速生成 Vue 工程化项目的工具，可以快速搭建 Vue 开发环境以及创建对应的 Webpack 配置文件。在使用 Vue 开发大型应用时，往往需要考虑代码目录结构、项目结构和部署、热加载、单元测试等事情；如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常会使用一些脚手架工具来帮助完成这些事情。

版本区别

Vue CLI 目前拥有两个版本，分别是 Vue CLI 2 和 Vue CLI 3，两者的区别如下：

  • Vue CLI 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
  • Vue CLI 3 是基于 Webpack 4 打造，Vue CLI 2 是基于 Webpack 3 打造
  • Vue CLI 3 的设计原则是 零配置，移除了配置文件根目录下的 build 和 config 等目录
  • Vue CLI 3 移除了 static 文件夹，新增了 public 文件夹，并且将 index.html 移动到 public 文件夹中

Vue CLI 2 安装

1
2
# 全局安装 Vue CLI 2
$ npm install vue-cli -g

Vue CLI 3 安装

1
2
# 全局安装 Vue CLI 3
$ npm install @vue-cli -g

由于 Vue CLI 3 和 Vue CLI 2 使用了相同的 vue 命令，若之前安装过 Vue CLI 2，那么 Vue CLI 2 的命令会被覆盖掉。如果安装了 Vue CLI 3 后，仍然需要使用 Vue CLI 2 的 vue init 功能，可以全局安装一个桥接工具，命令如下：

1
2
3
4
5
# 全局安装桥接工具
$ npm install -g @vue/cli-init

# 桥接工具安装完成后，`vue init` 命令的运行效果将会跟 `vue-cli@2.x` 的命令相同
$ vue init webpack my-project

Vue 模块化开发

在企业项目开发中，往往是使用脚手架进行模块化开发，因此需要提前安装好 Vue CLI 脚手架。

创建 Vue 项目

初始化项目

Vue CLI 脚手架使用 webpack 模板初始化一个名为 vue-demo 的 Vue 项目，命令如下：

1
$ vue init webpack vue-demo

项目结构

构建项目

  • 启动项目
1
$ npm run dev

项目启动后，浏览器打开 http://localhost:8080 即可以访问项目。

  • 打包项目
1
$ npm run build

Vue 单文件组件

Vue 单文件组件由三个部分组成：

  • Template：HTML 模板
  • Script:vue：Vue 实例配置
  • Style：CSS 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
};
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>