vue创建项目都忘记了怎么办

公司给了一个比较特殊的项目，不需要使用编写前端，其他几乎都是纯后端，只有很少的几个前端页面，我还是用的LayUI+JQuery做的后台页面，没做多久就看到了LayUI下线的说明，有点蕾姆~~~~~，对于后端开发的我来说，这个项目简直就是福音，但是我刚学会一点的vue又全部忘记了感觉有点亏，马上就找了一个前端项目的视频学习一下，顺便输出一点子东西。
视频链接: https://www.bilibili.com/video/BV1QU4y1E7qo

通用后台管理系统

技术栈

1. vue-router
2. vuex
3. axios
4. element-ui
5. 二次封装axios
6. 二次封装axios
7. mock
8. echarts

项目搭建

1. 项目架构分析
2. 项目模块搭建
3. 脚手架搭建配置
4. 组件初始化
5. 路由初始化
6. vuex初始化

模块分配

1. 登录页
2. 后台首页
3. 用户管理页
4. 分页处理
5. 用户crud
6. 路由守卫
7. 权限管理

安装一个Vue项目需要的环境

1. node.js
2. npm | yarn | cnpm
3. vue-cli (脚手架)

yarn是什么

yarn是由Facebook、Google、Exponent和Tilde联合推出了一个新的JS包管理工具，是为了弥补npm的一些缺陷而出现的。

• npm install的时候巨慢。特别是新项目拉下来要等半天，删除node_modules，重新npm install的时候依旧如此。

• 同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号的特点，下面有三个版本号在安装的时候代表不同的含义。
  "5.0.3","~5.0.3","^5.0.3"
  “5.0.3"表示安装指定的5.0.3版本，”~5.0.3"表示安装5.0.X中的最新版，"^5.0.3"表示安装5.X.X中最新的版本。这就麻烦了，常常会出现一个项目，有的同事是OK的，有的同事会由于安装的版本不一致出现bug。

• 安装的时候，包会在同一时间下载和安装，中途某个时候，一个包抛出了一个错误，但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端，有关错误包的错误就会在一大堆的警告中丢失掉，并且你甚至永远不会注意到实际发生的错误。
  正因为有这么多坑，我开始了解yarn的优势及其解决的问题。

yarn的优点

• “速度快”。速度快主要来自两个方面。

---

1.并行安装：无论npm还是yarn在执行的包的安装时，都会执行一系列任务。npm是按照队列执行每个package，也就是说必须等到当前package安装成功之后，才能继续后面的安装。而yarn是同步执行所有任务，提高了性能。
2.离线模式：如果之前已经安装过一个软件包，用yarn再次安装时之间从缓存中获取，就不像npm那样在从网络down了。

yarn和npm命令对比

npm	yarn
npm install	yarn
npm install react --save	yarn add react
npm uninstall react --save	yarn remove react
npm update --save	yarn upgrade

用npm安装yarn

npm install -g yarn

安装cnpm的命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装脚手架

cnpm install -g @vue/cli

创建项目

在终端使用vue create vue-cli命令，vue-cli项目名称，自定义，下方将以大量图片表达我的感情。

这样子一安装，然后就

通过百度翻译解释**您的网络连接似乎有问题。重试。。。**其实我的网络是没有问题的，通过百度了解如下解决方案

1. 安装好后更换淘宝镜像

yarn config set registry https://registry.npm.taobao.org

2. 移除原代理

yarn config delete proxy
npm config rm proxy
npm config rm https-proxy

3. 安装cnpm镜像并使用代理registry

安装cnpm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用代理registry
npm config set registry https://registry.npm.taobao.org

链接: 点这里.

使用yarn serve启动出现错误
第一个问题 ：error Couldn’t find a package.json file in "D:\系统默认\桌面\vue-cli"
解决方法：yarn init
第二个问题：error Command “serve” not found.

在百度的过程中使劲的卸载yarn，安装yarn，

卸载yarn

npm uninstall -g yarn

---

后面发现前端的问题都不是问题，只是因为我的文件夹路径错了，先使用cd vue-cli就行了，
无语了~~~~~~~~~~~~~~~~~~，搞的我百度了半天

到这个时候项目就成功启动了

element-ui的使用

• 网页直接使用
  

• 脚手架中的使用
  1.全部引入
  

按照这种方式引入之后，发现启动报错

然后发现跟视频报错不一样，于是只能一点点排查问题，然后把这些东西删掉恢复main.js原样还是报错，然后我就想到可能是安装element-ui的时候没有安装好，通过百度: 点我，需要安装core-js，我其实没有搞懂为什么~~~~~~~~~~~~~~

npm install --save core-js
npm run serve

安装成功之后启动会报eslint处理的错误，处理方式如下：
在工程下创建vue.config.js文件，在文件中编写下面信息，重新启动成功。

module.exports = {
  lintOnSave: false,
};

这个时候就可以使用element中的组件测试是否引入成功了。
2.按需引入

路由的使用

router-link和router-view

在src目录下的router目录下中有路由配置信息

在main.js中要将router导入进来

element-ui的Container 布局容器

选择合适的布局方式，这里选择的是倒数第二个，复制到home.vue中之后顺便将home.vue修改成Main.vue文件，

修改之后需要修改router文件夹下index.js的名字，顺便修改一下Main.vue中的name

export default {
  name: "Main",
  components: { CommonAside },
};

这个时候好像就能看到这样的效果了，这里忘记说了，刚刚我们使用的是按需导入，所以我们还需要将我们用到的组件导入到main.js中，我这里先麻烦，直接就全局导入了。。。。。。。。。。。

element-ui中的NavMenu 导航菜单

选择合适的适合自己需求的导航菜单，将代码复制

新建一个CommonAside.vue，用来表示左边导航菜单组件，这个时候需要将自己这个组件导出

当然需要在需要用到这个组件的时候导入，我们在Main.vue中导入，导入之后就可以使用了。

之后的步骤就需要渲染导航栏菜单了，这里给出这个menu的数组

menu: [
        {
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "Home/Home",
        },
        {
          path: "/mall",
          name: "mall",
          label: "商品管理",
          icon: "video-play",
          url: "MallManage/MallManage",
        },
        {
          path: "/user",
          name: "user",
          label: "用户管理",
          icon: "user",
          url: "UserManage/UserManage",
        },
        {
          label: "其他",
          icon: "location",
          children: [
            {
              path: "/page1",
              name: "page1",
              label: "页面1",
              icon: "setting",
              url: "Other/PageOne",
            },
            {
              path: "/page2",
              name: "page2",
              label: "页面2",
              icon: "setting",
              url: "Other/PageTwo",
            },
          ],
        },
      ],

然后再遍历的时候发现数组menu中有的对象有children，有的对象没有children，就写了一个计算属性computed

  computed: {
    noChildren() {
      return this.menu.filter((item) => !item.children);
    },
    hasChildren() {
      return this.menu.filter((item) => item.children);
    },
  },

在这里我出现了一个小错误，我把return this.menu.filter((item) => !item.children);写成了return this.menu.filters((item) => !item.children); 全都是代码提示的错，我找了半天才找出来错误，于是我稍微看了下操作数据的方式，嘿嘿，之后就是遍历数组渲染导航栏菜单了。

渲染成功之后就可以看到效果了。持续更新中