1、搭建vue-cli脚手架
(1) 首先安装node环境。安装npm 安装node 输入npm -v
和node -v
出现对应的版本号就说明安装成功(此处省略) 安装vue-cli脚手架 如果脚手架是4及以下版本(3版以下不能使用vue create vuename来创建项目) 记得先卸载 npm uninstall vue-cli -g mac本前面加sudo
再进行安装 指定版本未成功,直接安装sudo npm install -g @vue/cli 安装最新版本脚手架
![在这里插入图片描述](https://img-blog.csdnimg.cn/91823f4cb16946239025f6277a066f37.png)
(2)输入vue create lianshou2
vue_name是自己起的项目名(注意:不能试用驼峰形式来命名有问题 ) 接着选择是用vue2 还是vue3(如果在git中向下箭头失效 一般用终端创建项目 如果直接右键进入终端创建项目失败 可在搜索框中输入cmd启动终端 创建vue项目) (3)进入创建的文件夹下cd lianshou2
我这里是lianshou2
(4)在执行npm run serve或npm run dev
先将项目跑起来 就可以启动项目 当出现以下地址说明启动成功了
2、安装依赖包 npm install
出现node_modules说明安装成功
3、可以删除HelloWorld.vue文件(注意删除App.vue文件下的相关内容)
4、安装axios elment-ui router npm install -s axios
npm install -s element-ui
npm install -s vue-router@3
这里的3是版本的意思
安装elementui依赖 npm i element-ui -S (vue3的是npm install element-plus --save)
安装成功之后package。json中会出现下面图中elementui版本号
全局引入elementui 即在main.js中引入elementui
这是vue2 全局引入elementui的方法也可以按需引入
配置router.js文件,具体步骤如下:
配置main.js文件,配置如下:
import router from "./router"
import ElementUI from 'element-ui' // 导入ElementUI
import 'element-ui/lib/theme-chalk/index.css' // 导入样式
Vue.use(ElementUI)
import axios from 'axios'
Vue.prototype.$http = axios
router, // 将router写在这里
在App.vue文件下根div下 添加router-view
展示不同的页面:
配置跨域:
在vue.config.js文件里 复制如下代码:
`devServer: {
//host:‘0.0.0.0’, //可以忽略不写
port: 8080,//它是用来修改你打开后的端口号的
open: true,//值为 true的话,项目启动时自动打开到浏览器里边, false不会打开
proxy:{
‘/api’:{
target:‘http://192.168.1.3:8081/api’,//跨域请求的公共地址
//ws:false, //也可以忽略不写,不写也不会影响跨域
changeOrigin:true, //是否开启跨域,值为 true 就是开启, false 不开启
pathRewrite:{
‘^/api’:‘’//注册全局路径, 但是在你请求的时候前面需要加上 /api
}
}
}
`
安装axios此处省略(具体方法上面有写)
在组件中用axios进行请求数据:
async axiosPost() {
const { data: res } = await this.$http({
url: '/api/userm/we',
method: 'post',
data: {
name: 'admin01',
password: 'password'
}
})
console.log(res)
}
axios get方法参数是params post方法参数是data
5、在src文件夹下创建pages或者views文件夹(开发页面)在pages文件夹下创建home.vue文件(首页文件)
这时就可以在home.vue文件夹下使用elementui了
6、高度不是100%问题:
当给了el-aside height:100%,但是没有生效 这时需要查看其父元素height是否为100%,还有根元素html,body等height是否为100%,原因是元素会继承父元素height,如果父元素为0,则有子元素撑开
如图:
如图:
7、css部分可以安装less安装失败:
less安装失败可能是版本过高导致的,安装低版本之前需要卸载之前安装的高版本卸载指令:
npm uninstall less-loader
npm uninstall less
8、不存在父文件,有两个子文件,子文件不显示问题:
所有准备工作完成后就可以进行开发了,我这里是开发的管理后台项目,左侧导航栏有一级菜单,一个子组件,两个子组件(维护中的已发布和未发布),其他均可以正常切换显示,只有维护不能正常显示(不存在维护这个vue文件,只有已发布和未发布的vue文件),但是地址是对的,
解决办法有两种:
1.添加一个维护vue文件
2.在路由index.js文件中添加这句话:
以上两种方法都可以成功解决维护界面不显示的问题。
9、刷新界面导航栏回到初始状态问题
添加
10、配置跨域 封装axios ajax atob加密 tree树形结构
11、修改vue.config.js需要重启服务
12、forEach中不能用return 也不能使用splice方法 因为这个方法会改变原数组 所以会造成删除不彻底的问题 解决办法是另外定义一个数组arr 往arr中push相应的数据 最后把arr赋值给相应的数组