vue后台模块学习-1
后台模板
https://github.com/ant-design/ant-design-pro/
https://gitee.com/annsion/vue-vben-admin
1.yarn 安装
Scoop 是一个用于 Windows 的基于命令行的安装工具。 请按照此 说明 安装 Scoop 。
Scoop 安装后，你就可以在控制台执行如下命令安装 Yarn 了：
scoop install yarn
image.png
image.png
yarn 不是内部命令也不是可运行的程序或批处理文件（含所有解决方法）
https://blog.csdn.net/qq_44883349/article/details/104859924
2，开启启动项目
image.png
错误信息处理
image.png
错误找到问题解决方法 地址
https://www.cnblogs.com/lxz123/p/14300212.html
然后就成功了
image.png
查看浏览器
image.png
文档
https://vvbin.cn/doc-next/
3,里面内容
1.建设一个空白项目
image.png
image.png
simple和complete的区别
image.png
功能多了不少
ts 和js 的区别
typescript 特点
ts是js的超集，即你可以在ts中使用原生js语法。
ts需要静态编译，它提供了强类型与更多面向对象的内容。
ts最终仍要编译为弱类型的js文件，基于对象的原生的js，再运行。故ts相较java/C#这样天生面向对象语言是有区别和局限的
ts是由微软牵头主导的，主要来自C#
TypeScript和JavaScript的对比：
TypeScript是一个应用程序级的JavaScript开发语言。（这也表示TypeScript比较牛逼，可以开发大型应用，或者说更适合开发大型应用）
TypeScript是JavaScript的超集，可以编译成纯JavaScript。这个和我们CSS离的Less或者Sass是很像的，
我们用更好的代码编写方式来进行编写，最后还是有好生成原生的JavaScript语言。
TypeScript跨浏览器、跨操作系统、跨主机、且开源。由于最后他编译成了JavaScript所以只要能运行JS的地方，都可以运行我们写的程序，设置在node.js里。
TypeScript始于JavaScript，终于JavaScript。遵循JavaScript的语法和语义
TypeScript可以重用JavaScript代码，调用流行的JavaScript库。
TypeScript提供了类、模块和接口，更易于构建组件和维护。
2.umi 是什么？
https://umijs.org/zh-CN/docs/getting-started
这个是自己创建一个应用 开始。没有vue 基础是不好搞的。门槛很高了。
不适合新手去做。
- 开始搭建一个后台模板框架
node -v
v14.4.0
npm -v
6.14.5
vue-cli
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，
通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
Vue CLI 的介绍来自于官网合格这个作者地址
作者：双鬼带单
链接：https://www.jianshu.com/p/633e671784b8
如果上面已经验证正确安装了 node 和 npm, 则使用 npm install -g vue-cli 完成 vue-cli 的安装
image.png
开始
vue init webpack hello1
image.png
早上来的很早。开始进行初始化了。
成功了 。。选择yarn 来打包和
image.png
源码
image.png
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── .babelrc # babel config
├── .editorconfig # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js # eslint config
├── .eslintignore # eslint ignore rules
├── .gitignore # sensible defaults for gitignore
├── .postcssrc.js # postcss config
├── index.html # index.html template
├── package.json # build scripts and dependencies
└── README.md # Default README file
image.png
启动他，进入目录里面hello1里面
image.png
是不是很官网vue 很像
image.png
#####################################################
这里写了两个初始化的项目的步骤。
一个成熟的ant 一个原始的。步骤大体就是这样的。
开始搭建一轮新的路由和存储以及网络部分。
