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倍、容积更小、更以维护保养、原生态适用度高些。