vue环境搭建以及配置（脚手架搭建）

• webpack：主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备，比如资源的合并和打包。
• vue-cli：学习vue的过程会知道这是vue的脚手架，用于生成vue的功能模板。帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要npm install 就可以安装。

• 下载好之后安装，一直下一步就可以，安装位置可以换到自己熟悉的位置
  

• 安装好后可以在文件夹中找到nmp.cmd。
  

• 然后在命令行界面查看是否安装成功

• 建立如图两个文件夹：模块文件夹待会会改变位置，不管

• 然后运行以下两条命令，目的是修改系统默认的缓存位置（系统默认在c盘的programfile里）

• /***************一定要以管理员模式启动cmd界面！！！切记！！

• 到这一步可以选择配置国内镜像以提高速度（有时候国内镜像会出问题，yysy，还是得梯*子）

• 接下来还需要调整环境变量，进入修改界面，先修改系统变量：

  • 添加变量 NODE_PATH，变量值如下图
    

• 修改用户变量“Path”

  • path内会找到一个生成的node相关路径，修改成自定义的node_global如下图：

• 到这一步，配置就完成了，我们来测试一下。

• 测试可以用express模块，这是最常用的。

• /如果报错，说明你又没开管理员模式/

• 安装完express模块可以在之前设置的全局路径里找到，即node_global

• 如果你已经安装过express，它也会报错，就像这样
  

• 这时候，我们来安装vue.js

• 可以在全局目录下找到安装好的vue，

• 我们在nodeglobal目录下找到了安装的vue（最开始提到的node_modules文件夹此时也出现在这里）

• 查看vue版本时的命令行为：

• 然后安装vue脚手架的init模块：

• 切换为d盘，且为根目录

• 前三个部分可以自己命名填写，不建议大写，之后就会开始自动建立项目
  

成功！打开提示地址就可以看到vue界面

• 然后就可以用webstorm打开vue1查看自己的代码（图转）

• 要create一个uniapp项目，cli版本必须至少为3.0，不然执行下一步会报错（当然报错的时候它会告诉你版本太旧了，让你uninstall再install，就像这样）
  

• 此时会提示选择项目模板：
  

创建完就可以用webstorm打开了

项目需要uni-app开发，说说uni-app是什么，uni-app它跟Trao框架一样都是用来做多端开发的

共同点是：都可以发布到IOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

不同点是：uni-app它是基于Vue的语法去编写的2，Trao的话它是用React的语法编写的。

今天就来说uni-app如何分包：

当我们运行微信小程序工具时，微信的话有限包限制2MB，如果本地图片过多，我们现在首先想到的就是分包处理，先看一下目录

• 2020年9月：小程序平台支持 vue3 开发，小程序平台编译器依然使用webpack；
• 2021年11月：小程序平台编译器升级为 Vite；

so，这场持续一年之久的大版本升级，究竟给uni-app项目带来了哪些提升？

是时候总结（秀）一波了。

新版 uni-app 框架主要做了三大改进：

• 重写框架内核：基于vue3 + ts重写内置组件和API，实现更彻底、更高效的tree-shaking；
• 新增支持 Vite 构建工具，在H5平台实现秒开预览；
• 新增支持 Vue3.x，实现更灵活的开发方式，及更高的运行性能；

基于这三大改进，uni-app项目获得了多快好省四大收益：

• 更多的语法支持，支持组合式API，业务聚焦，开发效率更高；
• 更快的编译速度，H5平台十倍加速，小程序、App加速30%以上；
• 更好的运行性能，用户端响应更快，体验更好；
• 更小的代码体积，瘦身30%以上，更省体积、更省流量

新版uni-app支持Vue 3.x框架，支持组合式API，可实现更聚焦的业务开发。

Vue 3.x的一些新增特性，uni-app也已经完全支持，如：