详解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 相关文章推荐
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
原生JS生成指定位数的验证码
Oct 28 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
第五节--克隆
2006/11/16 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
python pdb调试方法分享
2014/01/21 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Python模块future用法原理详解
2020/01/20 Python
Python requests模块session代码实例
2020/04/14 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
python 写一个水果忍者游戏
2021/01/13 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
交通安全标语
2014/06/06 职场文书
房产公证书格式
2015/01/26 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
早安问候语大全
2015/11/10 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫