详解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提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
详解angular应用容器化部署
Aug 14 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
Vue实现简单的留言板
Oct 23 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
php对数组排序的简单实例
2013/12/25 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python django集成cas验证系统
2014/07/14 Python
Python批量发送post请求的实现代码
2018/05/05 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
java判断三位数的实例讲解
2019/06/10 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python实现人机五子棋
2020/03/25 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
计算机开发个人求职信范文
2013/09/26 职场文书
个人实用简单的自我评价
2013/10/19 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
2016年记者节感言
2015/12/08 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
代码解析React中setState同步和异步问题
2021/06/03 Javascript
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL