Vue项目化

第6章  Vue项目化

从本章开始，笔者将介绍一些使用Vue生态中其他成员进行项目开发的内容。这些内容是整个Vue生态中十分主流且核心的部分，不仅需要同学们能够看懂，还需要同学们在实战中能够得心应手地去应用。当然，要想做到这些，需要同学们跟着教程进行操作和练习。

6.1  项目快速构建

当下潮流的做法一般采用前后端分离的方式进行Web架构，但同时也对前端开发环境的搭建提出了更高的要求。一个完整的前端开发环境应该具备预编译模板、注入依赖、合并压缩资源、分离开发和生产环境以及提供一个模拟的服务端环境等功能。

对于初学者来说，能够理解这些概念的定义和应用已经十分不易，好在Vue为我们提供了项目的快速构建工具——Vue Cli。

6.1.1  Vue Cli简介

想起以前和朋友杂谈技术时，一个做Ruby的家伙说“Ruby on Rails是一个非常强大的Scaffolding（脚手架），用它一个小时就可以写个博客网站”。笔者心中暗自一惊，回去查了下这个“Scaffolding”单词，译为“脚手架”，但久久不能理解是什么意思，也不知“Ruby on Rails”到底是何方神圣。之后，偶然有次机会去学习一个“Ruby on Rails”的项目源码，才明白其意思，不过尔尔。

Vue Cli也是一个“脚手架”，使用它5分钟就可以搭建一个完整的Vue应用。Vue Cli是Vue官方提供的构建工具，可用于快速搭建一个带有热重载（在代码修改后不必刷新页面即可呈现修改后的效果）、lint代码语法检测以及构建生产版本等功能的单页应用。

上面的内容牵扯到很多概念，初次接触的同学也不必担心，没有必要对其刨根究底，一是往往它们作为一个名词，用于沟通而已，我们只需要理解其作用和用法；二是往往它们太过抽象，需要结合实例进行理解。

下面笔者将演示如何使用Vue Cli快速构建一个Vue项目。

6.1.2  使用Vue Cli构建项目

1.打开控制台，输入：

cnpm install vue-cli -g

安装Vue Cli，尚未安装cnpm的同学可以输入：

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装国内淘宝镜像源的cnpm）。

在命令执行结束之后，输入：

vue --version

。如果控制台打印出版本号，即表示安装成功。

2.在项目所要放置的文件目录下打开控制台，输入：

vue init webpack my-project

初始化项目（此处的my-project为项目名称）。

3.在模板下载完成后，Vue Cli将引导我们进行项目配置，笔者的配置如图6.1所示。

图6.1  Vue Cli项目初始化配置

其中，“Set up unit tests”和“Setup e2e tests with Nightwatch”选择“No”，这部分内容与Vue没有直接关系，这里不予探讨。最后一项也选择“no”是因为npm的镜像源在国外，安装依赖的速度缓慢且容易出错，笔者建议使用cnpm安装依赖。

4.输入：

cnpm install

安装项目依赖。

5.输入：

npm start

构建项目的开发版本，并启动webpack-dev-server。

此时，在浏览器地址栏输入http://localhost:8080即可访问项目，项目页面如图6.2所示。

图6.2  Vue Cli项目初始页面

6.之后，另开一个控制台，输入：

npm run build

构建项目的生产版本。

6.1.3  项目目录介绍

打开初始化后的项目目录，可以发现里面已经存在了一些文件和文件夹，如图6.3所示。

图6.3  Vue Cli项目初始目录

目录主要内容的说明如表6.1所示。

表6.1  Vue Cli项目初始目录

名称	说明
build	开发和生产版本的构建脚本
config	开发和生产版本的部分构建配置
dist	由npm run build生成；项目的生产版本；项目完成后，交付该文件夹即可
src	项目开发的关键资源目录和主要工作空间
static	静态资源（如使用JS赋值图片的src时，该图片资源应放在static下）
.babelrc	babel的配置文件（babel，下一代JS的预编译器）
.eslintignore	ESLint代码语法检测的配置文件（应忽略的语法格式）
.eslintrc.js	ESLint代码语法检测的配置文件（应规范的语法格式）
.gitignore	应被Git版本控制工具忽略的文件
index.html	应被webpack注入资源的模板HTML文件

之后使用编辑器（笔者使用的是WebStorm）打开项目，查看src文件夹下的内容，目录如图6.4所示。

图6.4  src目录下的内容

其中，assets文件夹用于存放图片、音频、视频等资源；components文件夹用于存放我们开发的单文件组件；router/index.js用于配置项目的前端路由（用到了Vue Router）；App.vue是Vue Cli为我们默认创建的项目的根组件；main.js则是webpack的入口文件。

内容来源：https://item.jd.com/12513015.html

转载于:https://my.oschina.net/clouddyy/blog/3041962