关于

前言

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

vue项目分类

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

按以上两类来看,直接引入vue.js文件就像页面中直接引入jQuery一样,这样的项目存在很多缺陷,只能使用一些基础的API和局限的功能,一般主要用于初级用户和小型项目。本文主要讲解第二种使用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构建,自定义构建就显得灵活得多,但是它需要你了解构建的步骤和原理,要求也就随之提高了。自定义构建分为以下几步:

  • 文件/文件夹创建
  • package.json文件创建
  • webpack配置文件创建
  • 入口文件创建
  • vue组件编写
  • 路由配置

1. 文件/文件夹创建

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

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服务器。

安装完成后,我们需要在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构建与自定义构建都有其适用的范围和对象,大家需要针对项目和自身条件的情况进行择优选择,同时在自定义构建中也有很多功能配置本文并未提及,感兴趣的童鞋可以自己继续探索。

vue项目构建与实战的更多相关文章

  1. vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除

    一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...

  2. vue项目 构建 打包 发布 三部曲

    一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博 ...

  3. 一、Vue项目构建

    Attention:以下内容为Mac机上运行,windows可能有所偏差- Step1 打开终端,键入npm install -g vue-cli,使用vue-cli脚手架搭建vue项目能省很多事儿- ...

  4. vue项目构建:vue-cli+webpack常用配置

    1,Webpack-dev-server的proxy用法:https://www.jianshu.com/p/f489e7764cb8 2,vue-cli3搭建项目之webpack配置:https:/ ...

  5. vue项目构建过程

    # template 模版项目 > A Vue.js project* 构建过程* 安装过程* 差异点* 打包优化 ## 构建过程```bashbogon:vue-cli caoke$ vue ...

  6. Vue 项目构建

    一.初始化项目 1.vue init webpack (fileName) 2.项目名称 3.项目描述 4.项目作者 5.是否依赖 .Vue 文件开发 第一个选项可以不依赖 .Vue 文件开发, 第二 ...

  7. 一:Vue项目构建

    第一步:需要安装nodeJS的环境,直接去官网下载https://nodejs.org/en/,下载下来按照提示一步步的安装.(vue.js是一个Js 框架.在node里面通过Npm 安装,是为了方便 ...

  8. 通过调试vue-cli 构建代码学习vue项目构建运行过程

    我们知道vue-cli 3.0之前直接基于webpack创建对应配置文件,我们通过学习webpack就能够了解其构建过程,然而从vue-cli 3.0开始,vue-cli命令行更改为@vue/cli以 ...

  9. Vue项目构建开发笔记(vue-lic3.0构建的)

    1.router.js里面 { path: '/about', name: 'about', // route level code-splitting // this generates a sep ...

随机推荐

  1. 设计模式的征途—6.建造者(Builder)模式

    建造者模式又称为生成器模式,它是一种较为复杂.使用频率也相对较低的创建型模式.建造者模式为客户端返回的不是一个简单的产品,而是一个由多个部件组成的复杂产品.因为,没有人买车会只买一个方向盘或者轮胎,大 ...

  2. jQuery css操作

    jQuery操作css的元素样式 1.访问匹配元素的样式属性 来个小案例: <div id="div" style="width:200px;height:200p ...

  3. .net数据统计系统设计(中小型)

    近一年多没在博客园写东西了,从换公司后就一直努力学习公司的框架和业务.而今接手一个电商数据统计项目,在博客园搜索统计项目解决方案却一无所获,最终自己设计并在开发的过程中持续更新,希望可以和大家一起交流 ...

  4. 基于Kubernetes的WAF集群介绍

    Kubernetes是Google开源的容器集群管理系统.它构建Docker技术之上,为容器化的应用提供资源调度.部署运行.服务发现.扩容缩容等整一套功能,可看作是基于容器技术的PaaS平台. 本文旨 ...

  5. spring boot入门(一)自己动手搭建spring boot

    spring boot官方文档  http://docs.spring.io/spring-boot/docs/1.2.3.RELEASE/reference/html/index.html 此篇文章 ...

  6. 数据结构与算法系列研究五——树、二叉树、三叉树、平衡排序二叉树AVL

    树.二叉树.三叉树.平衡排序二叉树AVL 一.树的定义 树是计算机算法最重要的非线性结构.树中每个数据元素至多有一个直接前驱,但可以有多个直接后继.树是一种以分支关系定义的层次结构.    a.树是n ...

  7. 3、J2EE学习推荐书籍

    3.J2EE学习推荐书籍       J2EE的学习应该循序渐进,一本好书会很快上手和深入.在学习J2EE之前,应该学好SQL,基本上,程序设计都会跟数据库打交道.如果SQL没学好,就如同房子没有基脚 ...

  8. 从 art-template 模版维护到动态加载的思考

    自己用 art-template 有些年头了,最近在培养团队学习 art-template 使用,发现有一个痛点比较难解决. 比如有一个模版,我们可以直接写在页面中,像这样: <script i ...

  9. Chart.js – 效果精美的 HTML5 Canvas 图表库

    Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是 ...

  10. [原创]LAMP+phpmyadmin+FTP环境搭建

    ***简单ftp服务器搭建: rpm –qa|grep vsftpd   //检查是否安装服务 yum –y install vsftpd-*   //安装服务 mkdir /var/ftp/uplo ...