Vue(1):用Vue-cli构建Vue3项目
使用Vue-cli构建Vue3项目
1、检查node版本
node -v
以上node版本位14.15.0满足Vue3项目的创建条件（Vu3需要node 版本8以上）
为什么需要安装node?
vue项目需要在node运行环境下进行、VUE项目==文件类型是.vue他是需要被编译成.js文件，才可以被浏览器识别
2、查看npm版本
npm -v
npm 是node内置的资源管理器、这里使用淘宝的镜像源
设置镜像源：npm config set registry 查看镜像源： npm config get registry
3、安装Vue-cli
npm install -g @vue/cliy
安装过程中可能出现卡顿情况、Ctrl+C停止后可重新执行命令
以上情况表示安装成功。在创建项目之前一起来了解一下Vue CLI 和 Vue的区别
4、Vue CLI 和 Vue的区别
- Vue CLI 和 Vue的区别 ：脚手架是一个基于 Vue.js 进行快速开发的完整系统,通过@vue/cli 实现快速搭建标准化项目的脚手架
- Vue的版本和VueCLI的版本的关系 ：Vue版本不受脚手架版本的影响 使用VueCLI构建项目过程，可以根据需求选择相应版本的Vue
5、创建Vue3项目
vue create vue3-demo
- Default（[Vue 2]…..）默认表示Vue2的项目
- Default（[Vue 3]…..）默认表示Vue3的项目
- Manually select features 用户手动选择
以上我选择第二个并创建项目、创建命令
vue create vue3-demo
vue3-demo创建的项目名称、等待创建成功后如下（左上角为vue3项目结构）相关命令可查看README.md详情
6、运行并编译vue3项目并浏览器查看
cd vue3-demo --切换项目路径 npm run serve --注意此处是serve而不是server
如上图标识基础的Vue3项目创建成功
7、Vue3项目结构解析
- node_modules:用于存放我们项目的各种依赖，比如axios等等，没有moudles文件，项目就没法运行，可以使用 npm install进行项目依赖的安装
- public:用于存放静态文件
- public/index.html:是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html
- src:我们存放各种vue文件的地方
- src/assets:用于存放各种静态文件，如图片等
- src/compnents：用于存放我们的公共组件，如 header、footer等
- src/APP.VUE:主vue模块 引入其他模块，app.vue是项目的主组件，所有页面都是在app.vue下切换的
- src/main.js:入口文件，主要作用是初始化vue实例，同时可以在此文件中引用某些组件库或者全局挂在一些变量
- gitignore:git上传需要忽略的文件格式
- babel.config.js:是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本
- package-lock.json:是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号
- package.json:模块基本信息项目开发所需要模块，版本，项目名称
8、Vue3 VS Vue2生命周期
与 2.x 版本生命周期相对应的组合式 API
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
其中setup是compositon Api在Vue3中的入口
9、总结
以上是展示使用Vue-cli快速搭建项目（也称之为搭建脚手架）、vue3相对vue2速度更快1.5至2倍、体积更小、更以维护、原生支持度更高。
版权声明：本文为ChenBigBao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。