Vue项目化

2019/04/24 17:55
阅读数 431

第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

展开阅读全文
打赏
2
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
2
分享
返回顶部
顶部