Nodejs,npm,vue,elementui
2020-04-24 08:34
543 查看
文章目录
- 1.创建项目`vue init webpack`
- 2.安装elementui`npm i element-ui -S`
- 3.在main.js中导入
- 4.使用
- 5Mock.js模拟数据
- 6ajax请求优化-axios
Nodejs安装
1.NodeJs下载:https://nodejs.org/en/download/
2.nodejs里面自带npm项目管理工具
3.升级:
npm install npm@latest -g
4.在idea中安装nodejs插件和vuejs代码提示插件
创建项目
1.创建前端项目
2.初始化
npm init -y
3.安装vue模块
npm install -g vue(全局安装)
1.MV VM模式:
Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。
View:它专注于界面的显示和渲染,在Vue中则是包含一堆声明式Directive和Component的视图模板。
ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在vue中“Vue对象实例”充当了这个ViewModel的角色;
2.vue常见指令
v-model=“表达式” 数据双向绑定 (缩写
:)
v-text=“表达式” 设置标签中的文本
v-html=“表达式” 设置标签中的html
v-if(else else if)=“表达式” 判断条件
v-for=“表达式” 循环
v-on=“表达式” 注册事件 (缩写
@)
watch监控
<div id="app"> <input type="text" v-model="message"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ message:"" }, watch:{ message(newVal, oldVal){ console.log(newVal, oldVal); } } }) </script>
3.vue组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <mytag></mytag> <mytag2></mytag2> </div> <div id="app2"> <mytag></mytag> <mytag2></mytag2> </div> <script> <!--全局组件 在不同vue中使用--> Vue.component("mytag",{ template:"<h1>全局组件</h1>" }) new Vue({ el:"#app", data:{ }, components:{ "mytag2":{ template:"<h1>局部组件</h1>" } } }) new Vue({ el:"#app2" }) </script> </body> </html>
4.vue路由
路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求(url地址和对应的资源的映射)
路由插件安装
npm install vue-router
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <p> <router-link to="/music">音乐</router-link> <router-link to="/friend">朋友</router-link> <router-link to="/like">喜爱</router-link> </p> <!--路由出口--> <router-view></router-view> </div> <script> /*new Vue({ el:"#app", data:{}, router:new VueRouter({ routes:[ {path:'/music',component:{template:"<h1>你想听音乐吗</h1>"}}, {path:'/friend',component:{template:"<h1>你的朋友呢</h1>"}}, {path:'/like',component:{template:"<h1>这音乐你喜欢吗</h1>"}} ] }) })*/ /*路由拆解*/ /*创建模板*/ const music={template:"<h1>你想听音乐吗</h1>"} const friend={template:"<h1>你的朋友呢</h1>"} const like={template:"<h1>这音乐你喜欢吗</h1>"} const routes=[ /*路由路径+组件*/ {path:"/music",component:music}, {path:"/friend",component:friend}, {path:"/like",component:like} ] //创建路由 const router = new VueRouter({ routes }) new Vue({ el:"#app", //引入路由 router //router:router }) </script> </body> </html>
5.webpack
将许多碎小文件打包成一个整体,减少单页面内的衍生请求次数,提高网站效率。
将ES6的高级语法进行转换编译,以兼容老版本的浏览器。
将代码打包的同时进行混淆,提高代码的安全性。
安装
npm install -g webpack
6.vue-cli(脚手架)
安装
npm install -g vue-cli
elementui
1.创建项目vue init webpack
2.安装elementuinpm i element-ui -S
3.在main.js中导入
import ElementUI from 'element-ui'; //引入核心js组件 import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式 Vue.use(ElementUI)
4.使用
component
<template> <div> <el-table :data="tableData" border style="width: 100%"> <el-table-column fixed prop="date" label="日期" width="150"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="province" label="省份" width="120"> </el-table-column> <el-table-column prop="city" label="市区" width="120"> </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="sizes,prev, pager, next" :page-size="size" :page-sizes="[5,10,15]" :total="total"> </el-pagination> </div> </template> <script> import axios from 'axios' export default { name: 'Table', data() { return { tableData:[], total:0, currentPage:1, size:5 } }, methods:{ handleCurrentChange(currentPage){ this.currentPage=currentPage this.tableData=[] this.gettableData() }, handleSizeChange(size){ this.size=size this.gettableData() }, gettableData(){ axios.post('/datalist').then(result=>{ let list =result.data.tableData this.total=list.length this.tableData=list.slice((this.currentPage-1)*this.size,this.currentPage*this.size) }) } }, mounted(){ this.gettableData() } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
router
import Table from '@/components/Table' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/table', name: 'Table', component: Table }, ] })
main.js
import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui'; //引入核心js组件 import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式 import './js/tableData' Vue.use(ElementUI) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
5Mock.js模拟数据
安装
npm install mockjs
模拟数据
import Mock from 'mockjs' // 引入mock var dataList = [] for (var i = 0; i < 15; i++) { dataList.push(Mock.mock({ 'date': '@date', 'name': '@cname', 'province': '@county', 'email': '@email', 'city': '@region', })) } //模拟请求 Mock.mock(new RegExp('/datalist'),'post',(param)=>{ return { "tableData":dataList } })
6ajax请求优化-axios
安装
npm install axios --save
import axios from 'axios' //配置axios的全局基本路径 axios.defaults.baseURL='http://localhost:80' //全局属性配置,在任意组件内可以使用this.$http获取axios对象 Vue.prototype.$http = axios
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 使用vue-cli创建项目(包含npm和cnpm的安装nodejs的安装)
- nodejs npm vue yarn 环境搭建
- nodejs和npm的安装配置步骤,webpack安装和使用步骤,vue安装教程
- 【H5,vue学习】1.nodejs,npm环境安装。
- npm安装教程(nodejs,vue-cli,淘宝镜像,创建vue项目)
- NodeJS、NPM安装配置步骤(windows版本)+Vue项目从搭建环境到打包上线
- vue之npm与nodejs版本号不一致-spawn cmd ENOENT
- 创建vue项目前的准备工作:安装nodejs(npm)、cnpm、vue-cli脚手架
- vue-cli 打包压缩(npm run build)文件后,默认根目录修改
- vue中使用elementUI让表格复选框部分禁用
- nodejs的安装(npm,cnpm)
- linux下安装nodejs及npm的方法
- nodejs,npm 安装配置步骤
- 基于SpringCloud+vue(ElementUI)+mySQL前后端分离设计之--前端Fetch请求封装
- NodeJS NPM 镜像使用方法
- nodejs npm常用命令 转
- ubuntu上面安装nodejs,npm,bower,grunt,yeoman
- CentOS 7 安装 Nodejs npm
- 宅小叔前端:Vue2.0搭建Vue脚手架(vue-cli) 及nodejs环境安装