第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的入口文件。