基于Vue的WebApp项目开发（一）
了解webpack的魔力：
项目结构以及开发环境
webpack初体验之打包文件
1、首先创建三个文件，分别是index.html、main.js和calc.js
index.html <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" id="v1" /> +
<input type="text" id="v2" />
<input type="button" id="bt" value="=" />
<input type="text" id="res" /> <script src="被打包的文件"></script>
</body>
</html>
main.js // 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res"); bt.onclick = function() {
// 2.0获取calc.js中的add方法并且调用结果
var v1value = parseFloat(v1.value);
var v2value = parseFloat(v2.value);
// 3.0调用add方法
var add = require('./calc.js');
res.value = add(v1value, v2value);
}
calc.js // 1.0定义add方法
function add(x, y) {
return x + y;
}
// 2.0导出add方法
module.exports = add;
2、使用命令将main.js打包为一个build.js文件，然后在html文件中调用build.js文件，打开浏览器，查看结果
webpack初体验之自动打包文件
项目结构
与上一个示例相比，index.htm（js文件引入路径要改变）、calc.js和main.js内容不变，仅仅只是多了个webpack.config.js配置文件和改变了相关文件的路径。下面是webpack.config.js的配置相关配置
module.exports = {
//指定打包的入口文件
entry: './src/main.js',
output: {
//指定输出路径
path: __dirname + '/dist',
//指定输出文件名
filename: 'build.js'
}
}
这次打包方便了很多，直接输入webpack，然后打开html文件即可查看效果
webpack初体验之loader
开发一个vue项目，往往需要借助于大量的loader包来编译相关的文件，下面就来看看编译一个CSS文件需要哪些步骤呢？
步骤一：创建package.json文件
步骤二：安装css-loader和style-loader到项目中
此时package.json文件的内容为
{
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "fengxiong",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.7",
"style-loader": "^0.19.1"
}
}
步骤三：创建一个静态文件，存放css，在site.css里面编写一些相关的样式
步骤四：配置好webpack.config.js和main.js文件
webpack.config.js
module.exports = {
//指定打包的入口文件
entry: './src/main.js',
output: {
//指定输出路径
path: __dirname + '/dist',
//指定输出文件名
filename: 'build.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
}]
}
}
main.js // 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res"); //导入css文件
require('../static/css/site.css') bt.onclick = function() {
// 2.0获取calc.js中的add方法并且调用结果
var v1value = parseFloat(v1.value);
var v2value = parseFloat(v2.value); // 3.0调用add方法
var add = require('./calc.js');
res.value = add(v1value, v2value);
}
步骤五：使用命令打包、发布文件
编译一个sass文件所需要的步骤
步骤一：安装node-sass和sass-loader到项目中
步骤二：创建一个scss文件
$color:blue;
#v2 {
border: 1px solid $color;
}
步骤三：配置好webpack.config.js和main.js文件
webpack.config.js
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/dist',
filename: 'build.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}]
}
}
main.js // 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res"); //导入css文件
require('../static/css/site.css');
//导入scss文件
require('../static/scss/site1.scss'); bt.onclick = function() {
// 2.0获取calc.js中的add方法并且调用结果
var v1value = parseFloat(v1.value);
var v2value = parseFloat(v2.value); // 3.0调用add方法
var add = require('./calc.js');
res.value = add(v1value, v2value);
}
步骤四：使用命令打包、发布文件
编译一个less文件所需要的步骤
步骤一：安装less-loader和less到项目中
步骤二：创建一个less文件
@color: green;
#res {
border: 2px solid @color;
}
步骤三：配置好webpack.config.js和main.js文件
webpack.config.js
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/dist',
filename: 'build.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}]
}
}
main.js // 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res"); //导入css文件
require('../static/css/site.css');
//导入scss文件
require('../static/scss/site1.scss');
//导入less文件
require('../static/less/site2.less'); bt.onclick = function() {
// 2.0获取calc.js中的add方法并且调用结果
var v1value = parseFloat(v1.value);
var v2value = parseFloat(v2.value); // 3.0调用add方法
var add = require('./calc.js');
res.value = add(v1value, v2value);
}
步骤四：使用命令打包、发布
编译其他资源（图片格式或者字体格式）所需要的步骤
步骤一：安装url-loader和file-loader
步骤二：配置webpack.config.js文件
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/dist',
filename: 'build.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
//url可能请求多个资源，所以将来在项目中通过url导入的资源都配置在这里
test: /\.(png|jpg|gif|ttf)$/,
//如果图片很大的话，那么会造成build.js也比较大，加载的时候
//导致效率低下。因此使用limit限制图片大小，当图片大小<40k，
//则把它当做base64字符串存储到build.js中
//否则单独将图片存放到磁盘上，将路径打包仅build.js中
loader: 'url-loader?limit=40000'
}
]
}
}
步骤三：在html文件创建一个id为bg的区域，在css、less或者scss中为那个区域添加一张图片
#v1 {
border: 1px solid red;
}
#bg {
width: 300px;
height: 100px;
//图片地址不固定
background: url(../../img/bg.jpg);
}
webpack初体验之热更新
热更新在很大程度解放了鼠标（f5）和键盘，因为它能够开启一个服务，监听代码的变动，当你的代码改变了，那么就会及时的结果反馈到浏览器上，而不用我们手动去刷新浏览器查看效果。下面我们来看相关的步骤
步骤一：安装服务cnpm install webpack webpack-dev-server html-webpack-plugin --save-dev
步骤二：配置package.json
{
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --inline --hot --open --port 5008"
},
"author": "fengxiong",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.7",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
参数说明：
--inline 自动刷新
--hot 热加载
--port 指定监听端口
--open 自动在默认浏览器中打开
--host 可以指定服务器的if
步骤三：配置webpack.config.js
var htmlwp = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/dist',
filename: 'build.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.(png|jpg|gif|ttf)$/,
loader: 'url-loader?limit=40000'
}
]
},
plugins: [
new htmlwp({
title: '首页', //生成页面标题
filename: 'index.html',
template: 'index.html'
})
]
}
步骤四：使用npm run dev运行项目
【注意】
在2018-03-20再次搭建此项目，发现运行不起来，估计跟webpack升级有一定的关系，百思不得其解，于是将之前的package.json和webpack.config.js文件代码复制粘贴进来才得以运行
1、package.json代码
{
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --inline --hot --open --port 5008"
//指定本机ip
"dev": "webpack-dev-server --inline --hot --open --port 3008 --host 192.168.1.？？？"
},
"author": "fengxiong",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.7",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
参数说明：
--inline 自动刷新
--hot 热加载
--port 指定监听端口
--open 自动在默认浏览器中打开
--host 可以指定服务器的ip
2、webpack.config.js代码
var htmlwp = require('html-webpack-plugin');
module.exports = {
//指定打包的入口文件
entry: './src/main.js',
output: {
//指定输出路径
path: __dirname + '/dist',
//指定输出文件名
filename: 'build.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.(png|jpg|gif|ttf|svg)$/,
loader: 'url-loader?limit=40000'
},
{
//将当前项目中所有的.js文件都要进行es6转es操作
test: /\.js$/,
loader: 'babel-loader?presets[]=es2015',
//node_modules中的所有.js文件不去转换，提高打包性能
exclude: /node_modules/
},
{
//解析.vue组件页面的文件
test: /\.vue$/,
loader: 'vue-loader'
},
{
//vue-preivew组件专用
test: /vue-preview.src.*?js$/,
loader: 'babel-loader'
}
]
},
plugins: [
new htmlwp({
title: '首页',
filename: 'index.html',
template: 'index.html'
})
]
}
webpack初体验之实现ES5转ES6
众所周知，ECMAScript6在很早的时候就已经出来了，但是依然有些浏览器不支持ES6的语法，该怎么办呢？此时就要将ES6的语法转换成被所有浏览器支持的ES5语法，下面是具体步骤。
步骤一：安装四个包
babel-core
babel-loader
babel-preset-es2015
babel-plugin-transform-runtime：这个包主要是打包.vue组件页面中的es6语法需要
步骤二：配置webpack.config.js文件
var htmlwp = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/dist',
filename: 'build.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.(png|jpg|gif|ttf)$/,
loader: 'url-loader?limit=40000'
},
{
//将当前项目中所有的.js文件都要进行es6转es操作
test: /\.js$/,
loader: 'babel-loader?presets[]=es2015',
//node_modules中的所有.js文件不去转换，提高打包性能
exclude: /node_modules/
}
]
},
plugins: [
new htmlwp({
title: '首页', //生成页面标题
filename: 'index.html',
template: 'index.html'
})
]
}
步骤三：改变main.js和calc.js的语法进行测试
main.js // 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res"); import '../static/css/site.css'; //es6语法
import addObj from './calc.js'; //es6语法 bt.onclick = function() {
// 2.0获取calc.js中的add方法并且调用结果
var v1value = parseFloat(v1.value);
var v2value = parseFloat(v2.value); // 3.0调用add方法
res.value = addObj.add(v1value, v2value);
}
calc.js //定义add方法
function add(x, y) {
return x + y;
} //es6语法
export default {
add //es6语法，当属性名称和属性值变量同名的时候可以只写一个
}
步骤四：使用命令npm run dev运行项目
至此，webpack在项目中的基本使用算是用各式各样的示例好好梳理一遍了，接下来进入正式的Vue项目开发。
基于Vue的WebApp项目开发（一）的更多相关文章
- 基于Vue的WebApp项目开发（二）
利用webpack解析和打包.vue组件页面 相关知识: vue项目中的每个页面其实都是一个.vue的文件,这种文件,Vue称之为组件页面,必须借助于webpack的vue-loader才能运行,所以 ...
- 基于Vue的WebApp项目开发（三）
实现根组件通用的头部和底部样式 明白由webpack搭建起来的Vue项目的执行流程,那么就可以知道实现这个需要只要在根组件和入口文件上做“手脚”即可 <!--以后项目的根组件--> < ...
- 基于Vue的WebApp项目开发（六）
实现商品购买列表页面 步骤一:新建goodslist.vue文件 <template> <div id="tml"> <!--利用mui中的图文表格组 ...
- 基于Vue的WebApp项目开发（四）
实现新闻咨询页面 目录结构 步骤一:创建newslist.vue文件 <template> <div id="tml"> <!--使用mui框架,实现 ...
- 基于Vue的WebApp项目开发（五）
实现图片分享列表 步骤一:新增图片列表文件photolist.vue <template> <div id="tml"> 图片分享页面 </div&g ...
- 基于Vue的工作流项目模块中，使用动态组件的方式统一呈现不同表单数据的处理方式
在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...
- 基于vue脚手架的项目打包上线（发布）方法和误区
最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...
- 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
- 【技术博客】基于vue的前端快速开发(工具篇)
一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...
随机推荐
- 论文阅读 | FPN：Feature Pyramid Networks for Object Detection
论文地址:https://arxiv.org/pdf/1612.03144v2.pdf 代码地址:https://github.com/unsky/FPN 概述 FPN是FAIR发表在CVPR 201 ...
- Python3 scrapy 新手命令
基本命令 建立项目 scrapy startproject projectname #在CMD命令框内执行,路径是你需要保存的位置 建立爬虫 cd projectname #在CMD命令框内执行,目的 ...
- Oracle递归查询（start with…connect by prior）
查询基本结构: select … from table_name start with 条件1 connect by 条件2 1.建测试用表 create table test ...
- ThinkPHP重写路由，掩藏public/index.php
在thinkPHP项目中,为了掩藏 public/index.php 路径时,需要修改相关的 Apache httpd.confi 文件.ThinkPHP .htaccess文件 修改 Apache ...
- J15W-J45W全铜质截止阀厂家，J15W-J45W全铜质截止阀价格 - 专题栏目 - 无极资讯网
无极资讯网 首页 最新资讯 最新图集 最新标签 搜索 J15W-J45W全铜质截止阀 无极资讯网精心为您挑选了(J15W-J45W全铜质截止阀)信息,其中包含了(J15W-J45W全铜质截止阀)厂 ...
- (转)nmon和nmon analyser的下载和使用
原文:https://blog.csdn.net/a7442358/article/details/50186283 nmon 工具可以为 AIX 和 Linux 性能专家提供监视和分析性能数据的功能 ...
- Jmeter调试脚本之关联
前言: Jmeter关联和loadrunner关联的区别: 1.在loadrunner中,关联函数是写在要获取变量值的页面的前面,而在就Jmeter中关联函数是要写在获取变量函数值的页面的后面 2.在 ...
- HDFS HA和Federaion
1.HA HA即为High Availability,用于解决NameNode单点故障问题,该特性通过热备的方式为主NameNode提供一个备用者,一旦主NameNode出现故障,可以迅速切换至备Na ...
- 【wordpress】wordpress环境的搭建
WordPress WordPress 是一种使用 PHP语言和 MySQL数据库开发的开源.免费的Blog(博客,网志)引擎,用户可以在支持 PHP 和 MySQL 数据库的服务器上建立自己的 Bl ...
- oracle系统包——dbms_random用法
oracle中随机数的包的源文件目录:{oracle_home}\rdbms\admin\dbmsrand.sql 1.返回0~1间的随机数(包括0和1)sql> select dbms_ran ...