webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
npm i webpack -g
全局安装webpack,这样就能在全局使用webpack的命令npm i webpack
安装到项目依赖中npm init -y
初始化项目,使用npm管理项目中的依赖包src 和 dist
,在src里新建index.htmlnpm i jquery -S
安装jquery类库index.js
并书写各行变色的代码逻辑: // 导入jquery类库
import $ from 'jquery'
// 设置偶数行背景色,索引从0开始,0是偶数
$('#list li:even').css('backgroundColor','lightblue');
// 设置奇数行背景色
$('#list li:odd').css('backgroundColor','pink');
index.js
会报错,因为浏览器不认识import
这种高级的JS语法,需要使用webpack进行处理,webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法;webpack 入口文件路径 输出文件路径
对index.js
进行处理:webpack .\src\js\index.js -o .\dist\main.js
7.而webpack4允许我们指定编译使用开发模式还是生产模式,这由mode这个配置来控制,value为枚举值:development/production,分别对应开发模式和生产模式(这个配置可以作为命令行的配置参数也可以作为配置文件中的一个配置项,默认值是production,即生产模式)。
设置打包模式为开发模式: webpack .\src\js\index.js -o .\dist\main.js --mode development
webpack.config.js
webpack.config.js
中配置这两个路径: // 导入处理路径的模块
var path = require('path');
// 导出一个配置对象,将来webpack在启动的时候,会默认来查找webpack.config.js,并读取这个文件中导出的配置对象,来进行打包处理
module.exports = {
//配置打包模式为开发模式
mode: 'development',
entry: path.resolve(__dirname, 'src/js/index.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'main.js' // 配置输出的文件名
}
}
webpack-dev-server
来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。npm i webpack -D
npm i webpack-dev-server --save-dev
安装到开发依赖webpack-dev-server
来进行打包,发现报错,此时需要借助于package.json
文件中的指令,来进行运行webpack-dev-server
命令,在scripts
节点下新增"dev": "webpack-dev-server"
指令,然后直接运行这个指令. npm run dev
发现可以进行实时打包,但是dist目录下并没有生成main.js文件,这是因为
webpack-dev-server`将打包好的文件放在了内存中main.js
放在内存中的好处是:由于需要实时打包编译,所以放在内存中速度会非常快http://localhost:8080/
网站,发现是一个文件夹的面板,需要点击到src目录下,才能打开我们的index首页,此时引用不到main.js文件,需要修改index.html中script的src属性为:
http://localhost:8080/
的时候直接访问到index首页,可以使用--contentBase src
指令来修改dev指令,指定启动的根目录:"dev": "webpack-dev-server --contentBase src"
配置端口号 配置自动打开浏览器 配置热更新(减少不必要的更新,只更新修改过得)
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
同时修改index页面中script的src属性为
html-webpack-plugin
插件配置启动页面由于使用--contentBase
指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性,所以推荐大家使用html-webpack-plugin
插件配置启动页面.
npm i html-webpack-plugin --save-dev
安装到开发依赖webpack.config.js
配置文件如下: // 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/js/index.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'main.js' // 配置输出的文件名
},
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路径
filename:'index.html'//自动生成的HTML文件的名称
})
]
}
注意:热更新在JS中表现的不明显,可以从一会儿要讲到的CSS身上进行介绍说明!
package.json
的script节点如下,其中--open
表示自动打开浏览器,--port 4321
表示打开的端口号为4321,--hot
表示启用浏览器热更新:"dev": "webpack-dev-server --hot --port 4321 --open"
webpack.config.js
文件,新增devServer
节点如下:devServer:{
hot:true,
open:true,
port:4321
}
webpack
模块:var webpack = require('webpack');
plugins
节点下新增:new webpack.HotModuleReplacementPlugin()
npm i style-loader css-loader --save-dev
webpack.config.js
这个配置文件:module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
]
}
use
表示使用哪些模块来处理test
所匹配到的文件;use
中相关loader模块的调用顺序是从后向前调用的;npm i less-loader less -D
webpack.config.js
这个配置文件:{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
npm i sass-loader node-sass --save-dev
webpack.config.js
中添加处理sass文件的loader模块:{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
npm i url-loader file-loader --save-dev
webpack.config.js
中添加处理url路径的loader模块:{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
limit
指定进行base64编码的图片大小;只有小于指定字节(byte)的图片才会进行base64编码:{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960(这里填写图片大小是多少字节的)' },
npm i babel-core babel-loader babel-plugin-transform-runtime --save-dev
安装babel转换器的相关loader包npm i babel-preset-env babel-preset-stage-0 --save-dev
安装babel转换的语法webpack.config.js
中添加相关loader模块,其中需要注意的是,一定要把node_modules
文件夹添加到排除项:{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
.babelrc
文件,并修改这个配置文件如下:{
"presets":["env", "stage-0"],
"plugins":["transform-runtime"]
}
babel-preset-es2015
可以更新为babel-preset-env
,它包含了所有的ES相关的语法;npm i babel-loader@7 -D
npm i vue -S
将vue安装为运行依赖;npm i vue-loader vue-template-compiler -D
将解析转换vue的包安装为开发依赖;npm i [email protected] -D
npm i style-loader css-loader -D
将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式;webpack.config.js
中,添加如下module
规则:module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.vue$/, use: 'vue-loader' }
]
}
App.js
组件页面:
这是APP组件 - {{msg}}
我是h3
main.js
入口文件: // 导入 Vue 组件
import Vue from 'vue'
// 导入 App组件
import App from './components/App.vue'
// 创建一个 Vue 实例,使用 render 函数,渲染指定的组件
var vm = new Vue({
el: '#app',
render: c => c(App)
});
webpack.config.js
中添加resolve
属性:resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
vue-router官网
1.安装路由
npm i vue-router -S
import VueRouter from 'vue-router'
Vue.use(VueRouter);
import login from './components/account/login.vue'
import register from './components/account/register.vue'
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
var vm = new Vue({
el: '#app',
// render: c => { return c(App) }
render(c) {
return c(App);
},
router // 将路由对象,挂载到 Vue 实例上
});
router-link
和router-view
: 登录
注册
Github 仓储地址
Mint-UI官方文档
1.安装
npm i mint-ui -S
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
primary
官网首页
文档地址
import '../lib/mui/css/mui.min.css'
webpack.config.js
中添加新的loader规则:{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }
根据官方提供的文档和example,尝试使用相关的组件
使用font-awesome字体图标库
安装 npm install font-awesome
导入 import 'font-awesome/css/font-awesome.css'
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc 修改为:
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
注意: MUI 不同于 Mint-UI,MUI只是开发出来的一套好用的代码片段,里面提供了配套的样式、配套的HTML代码段,类似于 Bootstrap; 而 Mint-UI,是真正的组件库,是使用 Vue 技术封装出来的 成套的组件,可以无缝的和 VUE项目进行集成开发;
因此,从体验上来说, Mint-UI体验更好,因为这是别人帮我们开发好的现成的Vue组件;
从体验上来说, MUI和Bootstrap类似;
理论上,任何项目都可以使用 MUI 或 Bootstrap,但是,MInt-UI只适用于Vue项目;
注意: MUI 并不能使用 npm 去下载,需要自己手动从 github 上,下载现成的包,自己解压出来,然后手动拷贝到项目中使用;
官网首页
文档地址
import '../lib/mui/css/mui.min.css'
webpack.config.js
中添加新的loader规则:{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }
git config --global user.name "用户名"
和 git config --global user.email ***@**.com
来全局配置提交时用户的名称和邮箱git init
在本地初始化项目touch README.md
和 touch .gitignore
来创建项目的说明文件和忽略文件;git add .
将所有文件托管到 git 中git commit -m "init project"
将项目进行本地提交git remote add origin 仓储地址
将本地项目和远程仓储连接,并使用origin最为远程仓储的别名git push -u origin master
将本地代码push到仓储中Mint-UI
的 Header
组件;mui
的 tabbar
;icons-extra
中的 mui-icon-extra mui-icon-extra-cart
,同时,应该把其依赖的字体图标文件 mui-icons-extra.ttf
,复制到 fonts
目录下!router-link
来实现单页面的切换; .router-link-active{
color:#007aff !important;
}
new VueRouter
的时候,通过 linkActiveClass
来指定高亮的类: // 创建路由对象
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' }
],
linkActiveClass: 'mui-active'
});
router-link
形式,并指定每个连接的 to
属性; // 导入需要展示的组件
import Home from './components/home/home.vue'
import Member from './components/member/member.vue'
import Shopcar from './components/shopcar/shopcar.vue'
import Search from './components/search/search.vue'
// 创建路由对象
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/member', component: Member },
{ path: '/shopcar', component: Shopcar },
{ path: '/search', component: Search }
],
linkActiveClass: 'mui-active'
});
lunbo: [
'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',
'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',
'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'
]
.vue
组件中使用vue-resource
获取数据npm i vue-resource -S
安装模块import VueResource from 'vue-resource'
Vue.use(VueResource);
Vue.http.options.root = 'http://www.liulongbin.top:3005';
tab-top-webview-main
完成分类滑动栏router-link
身上的类名 mui-tab-item
存在兼容性问题,导致tab栏失效,可以把mui-tab-item
改名为mui-tab-item1
,并复制相关的类样式,来解决这个问题; .mui-bar-tab .mui-tab-item1.mui-active {
color: #007aff;
}
.mui-bar-tab .mui-tab-item1 {
display: table-cell;
overflow: hidden;
width: 1%;
height: 50px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
color: #929292;
}
.mui-bar-tab .mui-tab-item1 .mui-icon {
top: 3px;
width: 24px;
height: 24px;
padding-top: 0;
padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
font-size: 11px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
tab-top-webview-main
组件第一次显示到页面中的时候,无法被滑动的解决方案: import mui from '../../../lib/mui/js/mui.min.js'
mounted
事件钩子中,注册 mui 的滚动事件: mounted() {
// 需要在组件的 mounted 事件钩子中,注册 mui 的 scroll 滚动事件
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
}
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
解决方法,可以加上* { touch-action: none; } 这句样式去掉。
原因:(是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西) http://www.cnblogs.com/pearl07/p/6589114.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
babel-plugin-transform-remove-strict-mode
一个Vue集成PhotoSwipe图片预览插件