登录/注册
GcsSloop
809
占位
1
占位
0
浏览量
占位
粉丝
占位
关注
Vue(1):用Vue-cli构建Vue3项目
GcsSloop
2021-07-22 09:35:19 2021-07-22
89
0

使用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倍、体积更小、更以维护、原生支持度更高。

 

原文: https://www.cnblogs.com/ChenBigBao/p/14778226.html

暂无评论