环境就不说了 安装node 安装cli之类。。。 一，初始化项目
vue init webpack projectName之后就是相关配置 严格模式最好不要选
执行此命令，即可启动自己的项目，关于主机端口配置在config目录下的index.js文件中
ps:以上比较简单 可以在菜鸟教程上观看详细的步骤
二，安装及引入项目所需依赖（做此记录时我仅安装Axios，Element，Less）
npm i vue-axios -S npm i element-ui -S npm install less less-loader --save-dev //i为install简写 -S为--save-dev简写 //据说使用简写会有一定差别，但暂未发现安装完成之后，在配置文件packjosn.js中会看到相关版本信息
"dependencies": { "axios": "^0.19.0", "element-ui": "^2.10.1", "vue": "^2.5.2", "vue-axios": "^2.1.4", "vue-echarts": "^4.0.3", "vue-router": "^3.0.1" },ps:其中dependencies为生产环境所需依赖，devDependencies为开发环境所需依赖具体区别在此不做赘述
安装完成之后在main.js中引入即可，上代码
import Vue from 'vue' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import axios from 'axios' import VueAxios from 'vue-axios' import App from './App' Vue.config.productionTip = false Vue.use(ElementUI) Vue.use(VueAxios,axios);使用此方法（VueAxios ）使用axios时还需安装VueAxios 否则报错， 或者将axios加入vue原型亦可，代码如下：
import axios from 'axios' Vue.prototype.$ajax= axiosaxios具体用法见官方文档axios使用说明 看到一篇封装axios的详细教程
https://blog.csdn.net/qq_38145702/article/details/81558816使用Less等预编译语言不用引入 具体见我另一篇博客VUE2.0 vue-cli构建项目中使用Less/Scss
项目起步完成
<el-button type="primary">主要按钮</el-button> //element使用正常 <style scoped lang="less"> @color:red; //Less使用正常 getData(){ this.axios.post('http://jsonplaceholder.typicode.com/posts' ).then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); } axios使用正常 [安利一个比较好用的在线接口网站jsonplaceholder]接下来开始写项目咯
三，开始踩坑 将HelloWord.vue作为空模板把默认内容删除
<template> //这里是页面--html 此处有且只有一个直接子div </template> <script> //这里是脚本--js export default { name: 'Login', data () { return { }; }, methods:{ } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> //这里是样式--css </style>然后去router/index.js文件中配置路由，在开发中只有发生页面跳转就在此写路由
import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login' //引入模板 Vue.use(Router) //使用路由 export default new Router({ routes: [ //配置路由 { path: '/', name: 'Login', component: Login } ] })ps:关于vue的路由使用可参考我转载的一篇文章，记录了路由传参的过程 https://segmentfault.com/a/1190000018711422 写到这应该可以结束了 具体踩的坑还是在别的文章中体现吧 不然太乱了 最后说一下打包上线，就是把vue项目打包成普通项目放入tomcat等服务器中
npm run build执行此命令后会将项目打包成dist文件夹，里面有index.html和一些资源文件，
！！关键是没人看啊 有人看的话给个赞 啊 我继续更新
想要把遮罩层抽出来写成子组件，在父组件里改变点击按钮让遮罩显示， 用父子传值好像只能传一次 在这里还是用ref操作dom吧
父组件里绑定ref
<ReleaseRes ref="ReleaseRes"></ReleaseRes> //然后在方法里改变值 //发布资源 releaseRes() {//点击这个按钮出现遮罩层 this.$refs.ReleaseRes.releaseResVisible = true; },当然也可以使用axios的响应拦截器对后台返回的“登录状态”进行判断 首先是在路由的index页对将要跳转的页面做如下配置
//需要登录才能进入的页面可以增加一个meta属性 meta: { requireAuth: true} },然后在main.js页面写相关逻辑
/* * 全局守卫 * */ router.beforeEach((to, from, next)=>{ console.log('-------------to--------'); console.log(to); console.log('---------------------'); console.log(sessionStorage); if (to.fullPath=="/"){//如果是去登录页就让他去 next() } else {//如果不是去登录页我们就检查他的session try{ if (sessionStorage.getItem("username")){//如果session里面有登录信息，就让他过去 next() }else { next({path:"/"})//如果没有就去登录页登录 } }catch (e) { next({path:"/"})//不行就去登录页 } } })router.beforeEach的理解: 定义: 全局守卫 ,不管访问那个路由都先走这里
每个守卫方法接收三个参数： to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。 next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。 next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。 next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。 确保要调用 next 方法，否则钩子就不会被 resolved。一，路径配置 在config-index下 二，在router-index下 三，build-utils下 另外：关于打包之后的样式与开发环境不一致的问题，可参见我的另一篇总结 https://blog.csdn.net/qq_44472722/article/details/95217445
好久没更了,今天写到一个要,于是百度了一下,代码如下
//修改滚动条样式 ::-webkit-scrollbar { width: .5rem; height: .5rem; background: hsla(0, 0%, 100%, 0.6); } ::-webkit-scrollbar-track { border-radius: 0; } ::-webkit-scrollbar-thumb { border-radius: 0; background-color: rgba(95,95,95,.4); transition: all .2s; border-radius: .5rem; &:hover { background-color: rgba(95,95,95, .7); } }然后写道一个前端的搜索功能,用es6的filter和match即可实现 首先写一个计算属性
computed:{ searchBaseName:function () { return this.checkBaseList.filter(item=>{ return item.match(this.baseNameKey) }) } },然后去遍历这个返回的数据而不是list本身了
<el-checkbox v-for="(item,index) in searchBaseName" :key="index" :label="item"> </el-checkbox>引用
https://blog.csdn.net/nihaoa50/article/details/84346880 exportData () { const form = this.getSearchForm() // 要发送到后台的数据 axios({ // 用axios发送post请求 method: 'post', url: '/user/12345', // 请求地址 data: form, // 参数 responseType: 'blob' // 表明返回服务器返回的数据类型 }) .then((res) => { // 处理返回的文件流 const content = res const blob = new Blob([content]) const fileName = '测试表格123.xls' if ('download' in document.createElement('a')) { // 非IE下载 const elink = document.createElement('a') elink.download = fileName elink.style.display = 'none' elink.href = URL.createObjectURL(blob) document.body.appendChild(elink) elink.click() URL.revokeObjectURL(elink.href) // 释放URL 对象 document.body.removeChild(elink) } else { // IE10+下载 navigator.msSaveBlob(blob, fileName) } }) }