vue后台通用模板实现和技术简易总结

vue后台通用模板实现和技术简易总结

准备工作

• 安装cnpm和yarn

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

yarn和npm区别和介绍

• “Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。”这句话让我想起了使用npm时的坑了：

  • npm install的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新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会把所有的日志输出到终端，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，并且你甚至永远不会注意到实际发生的错误。

  带着这些坑，我开始了解Yarn的优势及其解决的问题。

  Yarn的优点？

  • 速度快 。速度快主要来自以下两个方面：
  1. 并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。
  2. 离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。
  • 安装版本统一：为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。npm 其实也有办法实现处处使用相同版本的 packages，但需要开发者执行 npm shrinkwrap 命令。这个命令将会生成一个锁定文件，在执行 npm install 的时候，该锁定文件会先被读取，和 Yarn 读取 yarn.lock 文件一个道理。npm 和 Yarn 两者的不同之处在于，Yarn 默认会生成这样的锁定文件，而 npm 要通过 shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有当这个文件存在的时候，packages 版本信息才会被记录和更新。
  • 更简洁的输出：npm 的输出信息比较冗长。在执行 npm install 的时候，命令行里会不断地打印出所有被安装上的依赖。相比之下，Yarn 简洁太多：默认情况下，结合了 emoji直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。
  • **多注册来源处理：**所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致。
  • 更好的语义化： yarn改变了一些npm命令的名称，比如 yarn add/remove，感觉上比 npm 原本的 install/uninstall 要更清晰。

  Yarn和npm命令对比

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

脚手架构建项目

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。

输入命令

cnpm install -g @vue/cli

指定版本:

如是3.0以下

npm install -g vue-cli@版本号

如是3.0以上

npm install -g @vue/cli@版本号

注意：如果已经安装过vue-cli的记得升级vue-cli的版本

**升级命令：**npm install -g @vue/cli

创建项目

vue create + 项目名称

这里选择手动选择

注意：选中或者不选中 由空格键控制

本项目选择如下

选好以后 回车即可

是否使用Class风格装饰器？

即原本是：home = new Vue()创建vue实例

使用装饰器后：class home extends Vue{}

这里我们选择****no

使用Babel与TypeScript一起用于自动检测的填充?

这里我们选择****yes

使用什么css预编译器？ 我选择的 node-sass

这里选择正常模式

选择保存时检测

启动项目

项目效果

问题记录

• 左边导航栏消失：原因是vuex版本太高了 安装的时候需要是 npm i [email protected] --save 不用最新的即可

• 定义路由出现[Vue warn]: Invalid prop: type check failed for prop “index“. Expected String, got Undefined

解决：转换为string类型+ ‘’

• 使用v-for的过程中key的作用

1. 在写v-for的时候，都需要给元素加上一个key属性

2. key的主要作用就是用来提高渲染性能的！

3. key属性可以避免数据混乱的情况出现 （如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）
   为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

详细解释key

• 用户管理实现出现Avoid mutating a prop directly since the value will be overwritten whenever

降低element-ui的版本为2.15.6

• 最后出现了TypeError: router.addRoute is not a function

原因：可能是因为安装依赖的时候用的npm 但是npm安装的包里面的route 原型里面没有addRoute的方法，所以报错

解决方法:先npm uninstall vue-router卸载vue-router，再cnpm install [email protected]用cnpm安装

注意点:卸载再安装之后要重启项目，不然可能报错找不到vue-router
tips:这里要注意版本是一个问题，但是我再更新版本之后还是出现了找不到这个函数同样的错误，其实根本不需要import引入router，而是 addMenu(state,router) 这个函数少了一个参数，这个函数需要另外一个router的参数

我的总结的可能只是一部分，其他参考大佬：大佬问题记录总结

部署简易总结

常用命令：

yum install epel-release
yum install nginx
ps -aux | grep nginx
ps aux | grep httpd  //找到apache目录打开 http.conf

项目打包发布：

通过webpack-merge将公共配置合并到对应的环境配置

webpack.base.conf.js

webpack.dev.conf.js

webpack.prod.conf.js

• 完整项目+课程资料 完整项目代码+课程资料