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项目结构解析

1. node_modules:用于存放我们项目的各种依赖，比如axios等等，没有moudles文件，项目就没法运行，可以使用 npm install进行项目依赖的安装
2. public:用于存放静态文件
3. public/index.html:是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html
4. src:我们存放各种vue文件的地方
5. src/assets:用于存放各种静态文件，如图片等
6. src/compnents：用于存放我们的公共组件，如 header、footer等
7. src/APP.VUE:主vue模块 引入其他模块，app.vue是项目的主组件，所有页面都是在app.vue下切换的
8. src/main.js:入口文件，主要作用是初始化vue实例，同时可以在此文件中引用某些组件库或者全局挂在一些变量
9. gitignore:git上传需要忽略的文件格式
10. babel.config.js:是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本
11. package-lock.json:是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号
12. 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倍、体积更小、更以维护、原生支持度更高。