Vue3:用心打造Vue-cli项目。

摘要

用Vue-cli搭建Vue3新项目,首先要检查node版本号是否达标。因为Vue3必须在node环境下运行,而且.vue文件必须被编译成.js文件才能被浏览器识别。所以,安装node是必须的。

正文

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

 

 

关注不迷路

扫码下方二维码,关注宇凡盒子公众号,免费获取最新技术内幕!

温馨提示:如果您访问和下载本站资源,表示您已同意只将下载文件用于研究、学习而非其他用途。
文章版权声明 1、本网站名称:宇凡盒子
2、本站文章未经许可,禁止转载!
3、如果文章内容介绍中无特别注明,本网站压缩包解压需要密码统一是:yufanbox.com
4、本站仅供资源信息交流学习,不保证资源的可用及完整性,不提供安装使用及技术服务。点此了解
5、如果您发现本站分享的资源侵犯了您的权益,请及时通知我们,我们会在接到通知后及时处理!提交入口
0

评论0

请先

站点公告

🚀 【宇凡盒子】全网资源库转储中心

👉 注册即送VIP权限👈

👻 全站资源免费下载✅,欢迎注册!

记得 【收藏】+【关注】 谢谢!~~~

立即注册
没有账号?注册  忘记密码?

社交账号快速登录