WEBPACK
- 模块化开发----将某功能的用到的类型文件,变成一个文件
- js新特新需要webpake转换成低版本可以使用的形式 .js
- css新特性需要转换成浏览器能识别的文件 .css
nodejs ---- javascript的运行环境(服务端)
npm --远程下载安装我们工程所依赖的js包
npm install -g cnpm --registy=https://registy.npm.taobao.org (安装中国镜像下载更快)
打包文件分类(分模块开发)
文件名称(模块) | 文件功能 |
---|---|
show.html | 直接展示在浏览器的文件,V视图部分 |
mian.html | 打包主文件,也叫入口文件,用require(“module.js”)引入 |
module.js | 功能代码区,各种function,必须导出module.exports={json格式} |
build.js | 最终包裹,打包完成后被引入show.html中 |
视图部分V show.html
<div id="app">
<!--相当于MVVM的view视图-->
<!--{{name}}-->
<a v-bind:href="url">
<span v-text="name"></span>
</a>
<input type="text" v-model="num1"/> +
<input type="text" v-model="num2"/>=
<!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
<span v-text="result"></span>
<!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
<button v-on:click="change">计算</button>
<div v-bind:style="{ fontSize: size + 'px' }">javaEE培训</div>
</div>
</body>
<!--<script src="vue.min.js"></script>-->
<script src="src/build.js">
//编写MVVM中的model部分及VM(ViewModel)部分
</script>
main.js 入口方法 VM模块
== vm模块是视图与模型连接的区域 有控制层的方法==
//入口方法 线导入modul
var {add} =require("./modul01")
var Vue=require("./vue.min")
var VM = new Vue({
el:'#app',//vm接管了app区域的管理
data:{//model数据
name:'黑马程序员',
num1:0,
num2:0,
result:0,
url:'http://www.itcast.cn',
size:11
},
methods:{
change:function () {
this.result=add(Number.parseInt(this.num1),Number.parseInt(this.num2))
// this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
//alert("计算结果:"+this.result)
}
}
});
module.js M模块 主要是服务层方法
var add =function (x,y) {
debugger
return x+y;
}
var add2=function (x,y) {
return x+y+2;
}
module.exports.add=add;
// module.exports.add2=add2;
//module.exports={add,add2}
手动打包
- webpack main.js build.js
自动打包
- webpack-dev-server服务器
- 安装webpack-dev-server(发动机 变速器 半轴)
使用 webpack-dev-server需要安装
webpack(基础)
webpack-dev-server(热部署)
html-webpack-plugin (build.js ->html) 三个包。
命令: cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev
安装完成,
会发现程序目录出现一个package.json文件,此文件中记录了程序的依赖。
- 配置webpack-dev-server (点火器)
{
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 5008"
},
"devDependencies": {//依赖
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
–inline:自动刷新
–hot:热加载
–port:指定端口
–open:自动在默认浏览器打开
–host:可以指定服务器的 ip,不指定则为127.0.0.1,如果对外发布则填写公网ip地址
- scripts : 勾选功能
- devDependencies: 依赖选择
- 配置webpack.config.js (传动带)
//引用html-webpack-plugin插件,作用是根据html模板在内存生成html文件,它的工作原理是根据模板文件在内存中生成一个index.html文件。
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意:__dirname表示webpack.config.js所在目录的绝对路径
filename:'build.js' //输出文件
},
devtool: 'eval-source-map',
plugins:[
new htmlwp({
title: '首页', //生成的页面标题<head><title>首页</title></head>
filename: 'index.html', //webpack-dev-server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
})
]
}
单页面SPA(single page web application)
-
优点 :
- 不用刷新页面,所有都是AJAX请求。
- 服务端提供HTTP接口,前端请求HTTP接口获得数据,使用JS进行客户端渲染。
-
缺点 :
- 首页加载慢
- SEO
脚手架创建的基于VUE工程
文件结构
文件名称 | 文件功能 |
---|---|
build | |
config | 里边有一个index.js文件,记录跨域信息 |
dist | |
node_module | |
src | src文件下分类很多 |
scr 文件包含文件功能
文件名 | 文件功能 |
---|---|
assets ad 去+ set 足够 资产 | |
base 基础 | 内部结构与module一样,但是没有page |
common 公共的 | |
components 组成(加强 放置) | |
mock 模仿 | |
module 模型 | 功能块部分,每个功能块包含四个文件 |
statics 静态 | |
vuex 应用程序的状态管理模式+库 | 它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。 |
module下的文件
以cms为例
文件名称 | 文件功能 |
---|---|
api | 服务器接口 |
components | 组件被cms下的文件所公用 |
page 页面 | 三标签 template> script> style> |
router 路由器 | 名字必须是index.js |
page
<template>
//第一部分(表现)
</template>
<script>
//第二部分(JavaScript部分)
</script>
<style scoped>
//第三部分(样式部分)
</style>
router index.js
import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
import page_add from '@/module/cms/page/page_add.vue';
export default [{
path: '/',
component: Home,
name: 'CMS王泽旭',//菜单名称
hidden: false,
children:[ //子路由结构跟父路由结构一样
{path:'/cms/page/list',name:'页面列表cms',component: page_list,hidden:false},
{path:'/cms/page/add',name:'添加数据',component: page_add,hidden:true}
]
}
]
路由器json格式
name | 内涵 |
---|---|
path | url访问路径 |
component | 引入的组件(import 后的标识符) |
name | 页面中显示的名字 |
hidden | 是否隐藏 |
children | children:[{},{}] {}里边的内容与外层的内容一样 |
element-UI (与page的.vue文件配套使用)
<template>
<div>
<!--查询表单-->
<el-button size="small" @click="query">查询</el-button>
<el-table
:data="list"
stripe
style="width: 100%">
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="pageName" label="页面名称" width="120">
</el-table-column>
<el-table-column prop="pageAliase" label="别名" width="120">
</el-table-column>
<el-table-column prop="pageType" label="页面类型" width="150">
</el-table-column>
<el-table-column prop="pageWebPath" label="访问路径" width="250">
</el-table-column>
<el-table-column prop="pagePhysicalPath" label="物理路径" width="250">
</el-table-column>
<el-table-column prop="pageCreateTime" label="创建时间" width="180" >
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="total"
:page-size="params.size"
:current-page="params.page"
@current-change="changePage"
style="float:right">
</el-pagination>
</div>
</template>
<script>
import * as cmsAPI from '../api/cms'
export default {
data() {
return {
list: [],
total:50,
params:{
size:4,
page :2
}
}
},
methods: {
query:function(){
//调用服务端接口
alert('query');
confirm('确定输入吗?');
prompt("请输入你所要的")
cmsAPI.page_list(this.params.page,this.params.size).then((res)=>{
//将res的数据结构搞清楚
this.list=res.queryResult.list;
this.totle=res.queryResult.totle;
})
},
changePage:function(){
alert('change page');
}
},
}
</script>
elementUI 表格参数
分页
导出
跨域
浏览器的同源策咯(协议 ip 端口)
解决方案(代理)
运行在nodejs服务器上,服务器与服务器之间不存在跨域问题。
在config文件下有一个index.js文件记录着跨域信息
钩子函数(在vue对象创建的各个时机执行一个方法)
- created :this 实例已经创建 但是dom元素还没有被渲染
- mounted :dom已经被渲染
在export default{
data(){
json格式参数
},
methods:{},
created(){ //钩子函数与参数 方法同级
}
}