详解vue项目构建与实战


Posted in Javascript onJune 27, 2017

前言

由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户。本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法。

vue项目分类

详解vue项目构建与实战

首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引入vue.js文件 (2)使用vue单文件组件

按以上两类来看,直接引入vue.js文件就像页面中直接引入jQuery一样,这样的项目存在很多缺陷,只能使用一些基础的API和局限的功能,一般主要用于初级用户和小型项目。本文主要讲解第二种使用vue但文件组件构建的vue项目。

构建方式

详解vue项目构建与实战

构建一个vue项目存在着多种方式,首先我们需要用到相应的构建工具。官方推荐的构建工具主要有webpack和browserify,这里我更推荐大家使用webpack进行构建。同时除了构建工具,我们还需要用到构建方法,比如我们可以使用vue-cli脚手架来自动生成vue项目的基础目录文件,当然我们也可以从零开始进行自定义构建。

vue-cli构建

如果你使用vue-cli脚手架来构建vue项目,那么你只需敲击下面5行命令即可生成一个简单的vue项目(前提安装node.js):

npm install -g vue-cli

vue init webpack my-project

cd my-project

npm install

npm run dev

如此一个基础的vue项目目录就自动会展现在你面前,我们可以来看一下其自动生成的基础文件:

├── build // webpack/node配置文件
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 环境配置文件
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── node_modules // npm包文件
├── src // 静态资源文件
│ ├── assets
│ │ └── logo.png
│ ├── components 
│ │ └── Hello.vue 
│ ├── router
│ │ └── index.js 
│ ├── App.vue 
│ └── main.js
├── static
├── .babelrc // babel配置文件
├── .gitignore // gitignore忽略文件
├── .editorconfig // 编码风格配置文件
├── .postcssrc.js // postcss配置文件
├── package.json // node包管理文件
├── index.html // 首页模板
├── package.json // 包管理文件
└── README.md // 描述文件

这样的构建方式其实并不适用于所有项目,很多文件你的项目可能都不会用到,并且如果你对自动生成的文件一无所知,那么后期维护起来也会非常的吃力。所以这里不推荐新手使用vue-cli构建,而是推荐大家参考vue-cli生成的文件从零开始构建一个vue项目。

自定义构建

相比vue-cli构建,自定义构建就显得灵活得多,但是它需要你了解构建的步骤和原理,要求也就随之提高了。自定义构建分为以下几步:

  1. 文件/文件夹创建
  2. package.json文件创建
  3. webpack配置文件创建
  4. 入口文件创建
  5. vue组件编写
  6. 路由配置

1. 文件/文件夹创建

详解vue项目构建与实战

按照上方的图示,我们需要从零开始创建以上文件和文件夹,每一个文件都有其自己的用途。

2. package.json文件

使用下方命令,我们可以快速创建一个package.json文件:

npm init -y

然后修改其scripts配置项,添加打包压缩命令,并且增加dependencies依赖项,添加项目相应依赖,这里我们主要依赖了vue和vue-router(完整package.json配置文件见最后实例源码):

...

"scripts": {
 "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js"
},
"dependencies": {
 "vue": "^2.3.4",
 "vue-router": "^2.5.3"
}

...

3. webpack配置文件

其次我们需要创建我们的webpack配置文件,这里和构建其他项目不同的是,vue单文件组件需要使用vue-loader加载器进行加载,同时使用babel-loader进行ES6语法的转换(完整 webpack 配置文件见最后实例源码):

module.exports = {
...

module: {
 rules: [
  {
   test: /\.vue$/,
   loader: 'vue-loader',
  },
  {
   test: /\.js$/,
   loader: 'babel-loader',
   exclude: /node_modules/
  },
 ]
},

...
}

4. 入口文件

这里我们需要编写在webpack中配置的入口文件地址的entry.js,主要功能为挂载生成的vue实例app至id为app的DOM节点上:

// entry.js
import { app } from './app.js'

app.$mount('#app')
// app.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

const app = new Vue({
 router,
 ...App
})

export { app, router }

5. vue组件编写

然后我们需要编写一个最简单的vue组件index.vue,将其放在views文件夹下

<template>
 <div>hello world!</div>
</template>

<script></script>

<style></style>

同时我们需要编写最外层父组件App.vue,一般像下面这样,主要嵌套一层router-view来动态展示不同路由下的内容:

<template>
 <router-view></router-view>
</template>

<script></script>

<style></style>

6. 路由配置

在编写完我们vue的单文件组件后,我们需要配置我们的路由文件,以便实现一个单页应用:

import Vue from 'vue' // 引入vue
import Router from 'vue-router' // 引入路由

Vue.use(Router) // 注册路由

import Index from '../views/index.vue' // 引入我们刚刚编写的简单的组件

export default new Router({
 mode: 'hash',
 routes: [
  { 
   path: '/', 
   name: 'index', 
   component: Index,
  },
  { path: '*', redirect: '/' },
 ]
})

7. 热加载

最后我们需要实现一个前端热加载的功能来实时更新我们修改后的页面,这里我们需要安装一个webpack-dev-server的插件,其可以为我们搭建一个本地小型的Node.js Express服务器。

详解vue项目构建与实战

安装完成后,我们需要在package.json的scripts中配置启动命令dev:

...

"scripts": {
 "dev": "webpack-dev-server",
 "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js"
}

...

上次配置的build命令用于删除dist目录并切换开发环境及打包压缩代码,而dev命令用于启动本地服务器,生成的包只会存在于内存中。

8. 注意事项

完成上方步骤后其实还会存在一个问题,那就是我们的部分ES6代码无法获得解析,这里我们还需要添加babel的配置文件.babelrc:

{
 "presets": [
 ["env", { "modules": false }],
 "stage-2"
 ],
 "plugins": ["transform-runtime"],
 "comments": false,
 "env": {
 "test": {
  "presets": ["env", "stage-2"],
  "plugins": [ "istanbul" ]
 }
 }
}

这里我们使用了stage-2来处理ES6中对象无法使用…解构的问题,同时使用transform-runtime来优化我们的代码利用率。

项目实例

上方只讲述了vue自定义构建的主要步骤和关键代码,详细代码实例可以参考:https://github.com/luozhihao/vue-setup-course

结语

本文主要介绍了vue项目构建的两种方式,vue-cli构建与自定义构建都有其适用的范围和对象,大家需要针对项目和自身条件的情况进行择优选择,同时在自定义构建中也有很多功能配置本文并未提及,感兴趣的童鞋可以自己继续探索。

Javascript 相关文章推荐
javascript 显示当前系统时间代码
Dec 28 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 #Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 #Javascript
微信小程序商品到详情的实现
Jun 27 #Javascript
微信小程序的分类页面制作
Jun 27 #Javascript
JS实现批量上传文件并显示进度功能
Jun 27 #Javascript
angular过滤器实现排序功能
Jun 27 #Javascript
详解AngularJS ng-class样式切换
Jun 27 #Javascript
You might like
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
pyqt和pyside开发图形化界面
2014/01/22 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
python+tkinter实现学生管理系统
2019/08/20 Python
基于python监控程序是否关闭
2020/01/14 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
兼职学生的自我评价
2013/11/24 职场文书
合同协议书格式
2014/04/18 职场文书
电力安全事故反思
2014/04/27 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
感谢信模板大全
2015/01/23 职场文书
白鹤梁导游词
2015/02/06 职场文书
小班上学期个人总结
2015/02/12 职场文书
世界文化遗产导游词
2019/08/07 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js