详解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 相关文章推荐
flexigrid 参数说明
Nov 23 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
javascript 快速排序函数代码
May 30 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 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 SQL Injection with MySQL
2011/02/27 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
浅谈Python的list中的选取范围
2018/11/12 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
Python新手如何理解循环加载模块
2020/05/29 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
党员创先争优公开承诺书
2014/03/28 职场文书
财务人员担保书
2014/05/13 职场文书
倡议书作文
2015/01/19 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
小学思品教学反思
2016/02/20 职场文书
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL