开发vue-cli2项目步骤及遇到的问题

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 lianshou2vue_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赋值给相应的数组