详解vue-cli快速构建vue应用并实现webpack打包


Posted in Javascript onDecember 13, 2017

Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释。Vue官方文档 很全面的。

Vue两大核心思想,组件化和数据驱动,组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用,数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可。

一、什么是vue-cli

vue-cli是由vue官方发布的快速构建vue单页面的脚手架。参见vue-cli官方网站。http://vuejs-templates.github.io/webpack/

之前需要使用vue的单文件组件的功能,即将不同的模板分离到不同的.vue后缀的文件中,这样做需要使用webpack打包。参见官方说明:https://cn.vuejs.org/v2/guide/single-file-components.html  

然后在网上看来许多关于使用webpack打包文件的教程,如下:

https://github.com/varHarrie/Dawn-Blossoms/issues/7

普遍采用上面这篇文章介绍的方式。这样需要自己配置很多文件,操作复杂。后面我发现使用vue-cli可以实现webpack的快速打包。具体操作在后面介绍

二、安装vue-cli (基于ubuntu操作)

1、安装node

sudo apt-get install nodejs

2.安装npm

sudo apt-get install npm

2. 使用npm安装vue-cli

npm install --global vue-cli

使用vue -V检查是否安装成功。

详解vue-cli快速构建vue应用并实现webpack打包

在安装vue-cli时,已经自带安装webpack。

在这步中,可能比较慢,可以使用淘宝的镜像文件。可参考:http://riny.net/2014/cnpm/

如下设置:

npm install -g cnpm --registry=https://registry.npm.taobao.org

再使用cnpm安装vue-cli

cnpm install -g vue-cli

三、生成项目模板 vue init webpack vuedemo

webpack是模板名称,这里我们需要使用webpack的打包功能,所以使用webpack,其他更多模板参见:https://github.com/vuejs-templates

vuedemo是项目名称

上述命令回车之后,出现如下设置:

详解vue-cli快速构建vue应用并实现webpack打包

Project description :项目描述

Author: 作者

Vue build:打包方式(直接回车就可以)

Install ESL TO lint your code? 是否使用ESL代码检测

Pick an ESLint preset?  standard (设置编码风格采用stardard 参加(https://github.com/feross/standard)  

Setup unit tets with Kara + mocha?  是否安装单元测试,我选择安装

Setup e2e tests with Nightwatc? 是否安装e2e测试 ,我选择安装

进入创建的工程下面:

cd vuedemo (这里的vuedemo是之前输入的项目名)

使用tree命令查看项目目录结构如下:(如果没有tree命令,使用 sudo apt install tree安装)

详解vue-cli快速构建vue应用并实现webpack打包

安装依赖的库:

npm install

编译程序

npm run dev

详解vue-cli快速构建vue应用并实现webpack打包

同时浏览器出现如下界面:

详解vue-cli快速构建vue应用并实现webpack打包

如果没有出现 的话,可能你的8080端口被占用了,可以在config/index.js中将dev中的port改为其他值试试

四、webpack打包

这里需要的知识涉及webpack,可以参考https://github.com/varHarrie/Dawn-Blossoms/issues/7

对比上面我们提到的关于webpack的教程,我们需要关注下项目文件加下的build/webpack.base.conf.js文件

详解vue-cli快速构建vue应用并实现webpack打包

在这里,我们需要关注的只有注释的两个参数。至于config.build.assetsRoot的具体值是在哪里设置的呢?第三行:

var config = require('../config')

表明了config这个变量的引入文件加在哪里。在项目文件夹下的config/index中定义了build.assetsRoot的值

详解vue-cli快速构建vue应用并实现webpack打包

其中:__dirname是当前文件所在项目的文件夹的绝对路径

这时,我们查看文件目录如下:

详解vue-cli快速构建vue应用并实现webpack打包

运行:npm run build .这样就可以将资源文件打包到上面我们设置的文件夹dist/ 中

再次查看项目文件夹的目录结构:

详解vue-cli快速构建vue应用并实现webpack打包

此时已经自动生成了dist文件夹,在这个文件夹下有index.html文件和public文件夹,public文件夹下存放的就是webpack打包之后的文件。

五、总结:

总的来说,只需要一下几个步骤就可以快速使用vue-cli搭建使用webpack的vue单页面项目:
1、sudo apt-get install nodejs

2、sudo apt-get install nmp

3、nmp install -g vue-cli

4、vue init webpack vuedemo

5、cd vuedemo

6、npm run dev

7、npm run bulid

六、参考网站

vue-cli官网:http://vuejs-templates.github.io/webpack/e2e.html

webpack打包介绍:https://github.com/varHarrie/Dawn-Blossoms/issues/7

基于vue-cli快速构建:https://3water.com/article/112174.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
js观察者模式的弹幕案例
Nov 23 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 #Javascript
Angular4编程之表单响应功能示例
Dec 13 #Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 #Javascript
vue登录路由验证的实现
Dec 13 #Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 #Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 #Javascript
vue组件中使用iframe元素的示例代码
Dec 13 #Javascript
You might like
风格模板初级不完全修改教程
2006/10/09 PHP
function.inc.php超越php
2006/12/09 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
从Python的源码来解析Python下的freeblock
2015/05/11 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python实现多线程网页下载器
2018/04/15 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python中open函数的基本用法示例
2019/09/07 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
np.random.seed() 的使用详解
2020/01/14 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
投资建议书模板
2014/05/12 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers