基于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完全有能力驱动采用单文件组 ...

随机推荐

Angular material mat-icon 资源参考_Social
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
时间超限问题处理（c++）
c++中如果时间超上限做题上: 考虑关于二进制的方法比如说 find your present (2) 这道题可以用异或运算来发现不重复数对于动态规划状态压缩发面方面应用更多比如说p ...
ZOJ - 2112 主席树套树状数组
题意:动态第k大,可单点更新,操作+原数组范围6e4 年轻人的第一道纯手工树套树静态第k大可以很轻易的用权值主席树作差而得而动态第k大由于修改第i个数会影响[i...n]棵树,因此我们不能在原主席 ...
Python的第三方模块安装
python的第三方模块安装一般使用python自带的工具pip来安装. 1.在Windows下,在安装python时勾选[安装pip]和[添加python至环境变量]. 如果在python安装目录的 ...
vue 之bug<1> Warn : [vue-router] Duplicate named routes definition:
原因:定义重复的路由名称. 我有3个不同的(父级)vue文件分别配置了3个相同的(子级)vue文件,配置路由的js文件里子集路由的name重复了. 解决方案: 一天一个小Bug
cmake 简学
https://www.cnblogs.com/cv-pr/p/6206921.html
生成随机32位Token43位asekey
// 生成随机32位Token字符和43位AseKey var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', ' ...
Mac下配置maven和集成到ecclipse（Mac 10.12）
1.到官网下载maven,http://maven.apache.org/download.cgi 下载好的tar.gz包解压出来,并重命名为maven3,拷贝到/usr/local目录下 2.配置环 ...
如何制作高水平简历？&& 制作简历时需要注意的问题
1. 投递简历时一定要署名. 无论是简历的名称还是投递到邮箱时的名称,都需要说明重要信息,即姓名-职位-学校-专业 . 这样,hr在筛选.录入简历时可以很方便查找简历,这样也可以给hr.面试官一个 ...
卸载oracle10g
网上搜集的.暂时先用着完全卸载Oracle方法:软件环境: 1.Windows XP + Oracle 10g 2.Oracle安装路径为:d:\Oracle 1.如果数据库配置了自动存储管理(ASM ...

基于Vue的WebApp项目开发（一）

基于Vue的WebApp项目开发（一）的更多相关文章

随机推荐

热门专题