# VUE基本介绍 构建界面的渐进式框架，替代jstl,el表达式等 # 案例 \`\`\`html {{messgae}} \`\`\` # 基本语法 ##### 基本数据与渲染指令 \`\`\`html {{content}} {#app} ================== {{content}} =========== \`\`\` ##### 双向数据绑定 \`\`\`html {{searchMap.keyWord}} \`\`\` ##### 事件绑定 \`\`\`html 查询 查询 \`\`\` ##### 修饰符 \`\`\`html 保存 \`\`\` ##### 条件渲染 \`\`\`html 是否同意 ok {#app} ========= not ok ====== \`\`\` ##### 循环 \`\`\`html * {{n}} * {{n}}-{{index}} \`\`\` \`\`\`html {{user.id}} {{user.name}} \`\`\` # 组件 \`\`\`html \`\`\` # 生命周期 渲染之前created，之后mounted \`\`\`html \`\`\` # 路由 \`\`\`html Hello {#app} ============ xx xx \`\`\` # Axios - 独立于Vue的项目，与Vue一起使用实现ajax请求 - 应用场景 !\[image-20200527173459273\](C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20200527173459273.png) - 使用 - 引入vue.js,axios.min.js - 编写axios代码 \`\`\`html \`\`\` # element-ui 饿了么提供的组件库，各种效果, http://element-cn.eleme.io # node.js - java需要jdk，javascript需要nodejs - 可模拟服务器如tomcat \`\`\`js const http=require('http'); http.createServer(function(request,response){ response.writeHead(200,{'Content-Type':'text/plain'});; response.end('Hello Server') }).listen(8888); \`\`\` # npm 类似于java中的maven， 详细见：https://www.cnblogs.com/Dean0731/p/12956891.html # babel 转码器,将es6转化为es5 \`\`\`shell # 第一步 npm install --g babel-cli babel --version # 第二步，创建js # 第三部，创建'.babelrc'文件,名字固定 { "presets":\["es2015"\], "plugins":\[\] } # 第四部，安装转码器 npm install --s babel-preset-es2015 # 第五步, 文件夹转码 babel src --out-dir dist2 babel src -d dist # 文件转码 babel xxx.js -o\| --out-file yy.js \`\`\` # 模块化 1. 是什么？ - 后端：controller，service，mapper，类与类之间调用叫做模块化 - 前端：js与js之间的调用 2. es6模块化 不能再nodejs运行，需要babel转化为es5 ###### 方法一 \`\`\`javascript // 01.js export function getList(){} // 02.js import {getList} from './01.js' getList() //调用 \`\`\` ###### 方法二 \`\`\`javascript // 01.js export default{ getList(){}, update(){} } // 02.js import m from './01.js' m.getList() \`\`\` 3. es5模块化 \`\`\`javascript // 01.js const sum = function(a,b){ return parseInt(a)+parseInt(b) } const subtract = function(a,b){ return parseInt(a)-parseInt(b) } // 简写 module.exports={ sum,subtract } module.exports={ sum:sum, sub:subtract } \`\`\` \`\`\`javascript // 02.js const m = require('01.js') m.sum(a,b) \`\`\` # webpack 静态资源打包工具，将静态资源打包为一个 例：1.js 2.js 3.css ----\>webpack ----\>folder.js ,减少页面请求次数 \`\`\`shell npm install -g webpack webpack-cli \`\`\` ###### js打包 \`\`\`javascript //01.js xxxx //02.js xxxx // main.js const x = require('01.js') const y = require('02.js') x.zzz y.zzzz \`\`\` \`\`\`javascript // webpack.config.js 固定名字 const path=require('path') // Nodejs内置模块 module.exports={ entry:'main.js',//配置入口文件 output:{ path:path.resolve(__dirname,'dist'), // 输出路径 filename:'bundle.js' //文件名 } } \`\`\` \`\`\`shell webpack # 有黄色警告 一行显示 webpack --mode=production webpack --mode=none webpack --mode=development # 没有警告,多行显示 \`\`\` ###### css打包 \`\`\`css // 01.css xxxx // main.js中 require('01.css') // 安装css加载器 npm install -s style-loader css-loader // 修改webpack配置文件 \`\`\` \`\`\`js const path=require('path') // Nodejs内置模块 module.exports={ entry:'main.js',//配置入口文件 output:{ path:path.resolve(__dirname,'dist'), // 输出路径 filename:'bundle.js' //文件名 }， module:{ rules:\[ { test:/\\.css$/,//打包规则应用到css结尾的文件 use:\['style-loader','css-loader'\] } \] } } \`\`\` \`\`\`shell # 重新打包即可 \`\`\` # 后台模板vue-admin-template - 下载，解压到工作区，https://github.com/PanJiaChen/vue-element-admin - 进入目录 npm install 安装依赖 - 启动 npm run dev 注：后台=接口(java)+管理员界面(nodejs)，前台：用户界面(nodejs)