VUE、五
一、webpack
webpack是一个现代JavaScript应用程序的模块打包器，分析你的项目结构，找到JavaScript模块，以及其它的一些浏览器不能直接运行的拓展语言，并将其转换和打包为合适的格式供浏览器使用
四个重点：
1、入口（enter），一般只有一个
2、输出（output）
3、加载器（loader）
4、插件（plugins）
1、处理文件
webpack 需要处理的文件名 生成的文件名
2、处理文件
创建webpack.config.js 配置文件
在配置文件里面配置代码
let path = require('path')
module.exports = {
//配置入口文件
entry:'./src/app.js',
//配置输出文件
uotput:{
path:path.join(__dirname,'dist'),
//输出文件的名字
filename:'index.js'
}
}
在命令行直接执行命令
webpack
3、处理文件
下载webpack-dev-server文件
let path = require('path')
module.exports = {
//配置入口文件
entry:'./src/app.js',
//配置输出文件
uotput:{
path:path.join(__dirname,'dist'),
//publicPath表示静态资源在服务器上存放的路径
publicPath:'/dist',
//输出文件的名字
filename:'index.js'
}
}
在命令行直接执行命令
webpack-dev-serve
升级版
webpack-dev-serve --inline --hot --open --port 8090
再升级版
在package.json里面的“scripts”里面,自定义命令
“scripts”：{
“dev”:"webpack-dev-serve --inline --hot --open --port 8090"
}
然后再命令行运行
npm run dev
4 、加载器处理css
先安装
npm install css-loader style-loader --save-dev
module字段：专门用来配置各种加载器的
module: {
rules: [
// 配置的是用来解析.css文件的loader(style-loader和css-loader)
{
// 1.0 用正则匹配当前访问的文件的后缀名是 .css
test: /\.css$/,
use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左，顺序不能乱
}
]
}
css-loader：用于处理后缀名是.css的文件
style-loader：用来将处理完的样式添加到style标签中去
5、加载器处理scss和less
npm install less less-loader sass-loader node-sass --save-dev
{
test: /.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader'
}]
},
{
test: /\.scss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}]
}
6、加载器处理图片和字体图标
安装npm install file-loader url-loader --save-dev
url-loader封装了file-loader
{
test: /\.(png|jpg|gif|eot|svg|ttf|woff)/,
use: [{
loader: 'url-loader',
options: {
// limit表示如果图片大于50000byte，就以路径形式展示，小于的话就用base64格式展示
limit: 50000
}
}]
}
7、加载器处理html，自动生成index.html
-
npm install html-webpack-plugin --save-dev
-
如果添加了title，需要在模板中添加<%= htmlWebpackPlugin.options.title %>
// 注意需要注释掉publicPath，不然会冲突
var HtmlWebpackPlugin = require(‘html-webpack-plugin’)
plugins: [
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘template.html’,
title:’’
})
]
8、加载器处理babel
1、安装
npm install babel-core babel-loader babel-preset-env --save-dev
注意：
webpack 1.x | babel-loader <= 6.x
webpack 2.x | babel-loader >= 7.x (推荐) (^6.2.10 也能用, 但是会出现不推荐使用的警告)
webpack 3.x | babel-loader >= 7.1
{
test: /\.js$/,
// Webpack2建议尽量避免exclude，更倾向于使用include
// exclude: /(node_modules)/, // node_modules下面的.js文件会被排除
include: [path.resolve(__dirname, 'src')],
use: {
loader: 'babel-loader',
// options里面的东西可以放到.babelrc文件中去
options: {
"presets":["env"]
}
}
}
// .babelrc文件内的配置
{
"presets":["env"]
}
二、单文件组件
结合webpack处理单文件组件
配置webpack相关loader
-
npm install vue --save
-
npm install vue-loader vue-template-compiler --save-dev
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
{
test: /.vue$/,
loader: ‘vue-loader’
}
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin()
]// 如果使用的是webpack1.x，还需要安装
babel-plugin-transform-runtime,并添加一下配置；如果是webpack2.x以上请忽略一下配置
{
test: /.js$/,
include: [path.resolve(__dirname, ‘src’)],
use: {
loader: ‘babel-loader’,
// options里面的东西可以放到.babelrc文件中去
options: {
presets: [‘env’]
// plugins: [‘transform-runtime’]
}
}
}
使用vue文件创建vue组件
<!-- App.vue -->
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
data () {
return {
msg: 'hello world'
}
}
}
</script>
<style>
div {
color: red;
}
</style>
引入组件,并将组件渲染到页面
// app.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h=> h(App)
})
路由配置
1、npm install vue-router --save
// app.js
import Vue from 'vue'
import App from './App.vue'
import Login from './Login.vue'
// 1. 引入vue-router
import VueRouter from 'vue-router'
// 2. 表示使用路由插件
Vue.use(VueRouter)
//3. 配置路由规则
var router = new VueRouter({
routes: [
{ name: 'login', path: '/login', component: Login }
]
})
new Vue({
el: '#app',
// 挂载路由
router,
// 这是个渲染函数，指定渲染组件
render: h => h(App)
})
vue-cli 脚手架工具
vue-cli是官方的一个脚手架工具，所谓脚手架呢就是一个架子，什么架子呢？项目结构的架子，里面有一些最基本的结构配置。利用vue-cli呢，我们可以生成这样的一个脚手架，所以呢它就被称为vue脚手架工具。
npm install vue-cli -g 下载工具
vue init webpack admin 通过上面的工具下载模板