1.VUE3照本宣科——认识VUE3
2.VUE3照本宣科——应用实例API与setup
3.VUE3照本宣科——响应式与生命周期钩子
4.VUE3照本宣科——内置指令与自定义指令及插槽
5.VUE3照本宣科——路由与状态管理器
6.VUE3照本宣科——eslint与prettier
7.VUE3照本宣科——package.json与vite.config.js
👨💻👨🌾📝记录学习成果,以便温故而知新
“VUE3照本宣科”是指照着中文官网和菜鸟教程这两个“本”来学习一下VUE3。以前也学过VUE2,当时只在gitee留下一些代码,却没有记录学习的心得体会,有时也免不了会追忆一下。
以后出现“中文官网”不做特殊说明就是指:https://cn.vuejs.org/;菜鸟教程就是指:https://www.runoob.com/vue3/vue3-tutorial.html
本文是以NPM或者类似命令来创建项目,菜鸟教程中CDN的法子不做介绍,因为VUE的CDN可能很好找,但是其它组件或插件的CDN找起来可能就很费劲了,不如NPM一个命令来得方便。
npm create vue@latest
创建过程如图:
其中Add Vue Router for Single Page Application development?选择YES是添加路由;Add Pinia for state management?选择YES是用Pinia管理状态;Add ESLint for code quality?选择YES是用ESLint校验代码;Add Prettier for code formatting?选YES是用Prettier格式化代码。
npm init vue@latest
创建过程如图:
通过截图对比,发现两个命令的效果是一样的。然后就查了一下,一个网友说:
init命令有两个别名create、innit(init就是innit的缩写),所以说,npm init与npm create是等价的。
VUE3照本宣科系列是以“zbxk”项目来展开的。
如下图:
从截图中目录最后的“vite.config.js”可以知道默认创建的项目的构建工具是vite。
下面一一介绍主要目录或文件。
项目静态资源,项目打包时直接复制到dist文件夹。
vue源文件文件夹,详情如图:
资源文件夹,会被编译。
组件文件夹,详情如图:
其中icons文件中有4个图标组件,因为它们具有一定的共性,所以放到了一个文件夹里了;HelloWorld.vue是1个组件;TheWelcome.vue也是1个组件,同时它是父组件,而WelcomeItem.vue是子组件。
路由,如下图:
后面会有专题讲到路由,请参看:VUE3照本宣科——路由与状态管理器。
状态管理器,如下图:
后面会有专题讲到状态管理器,请参看:VUE3照本宣科——路由与状态管理器。
这个目录字面上是视图,实际上是路由跳转的页面,如下图:
Vue单页面应用程序主组件,其它一切都是作为它的子组件被引用的。
入口“index.html”文件引用的模块,渲染Vue组件,把App.vue渲染到到“index.html”文件id为app的div上。安装组件,全局注册等其它工作。
eslint插件的配置文件。
这个文件是git提交时的忽略配置,因为与VUE本身的关系不大,属于项目通用管理工具,所以不做介绍,只要明白就行
prettier插件的配置文件。
这是项目的入口,相当于很多编程语言中main函数所在的文件。
项目所用的包。
项目默认的Markd文件,这不是本系列的重点,所以也不做介绍。
项目的vite配置文件,详情见vite中文文档。
用集成开发环境Visual Studio Code打开项目文件夹,会出现如下图的“NPM脚本”:
如果没有出现,在资源管理器中右击鼠标,如下图选择“npm脚本”:
刚刚建好的项目,或者从gitee等上面下载的项目,需要安装依赖包,如下图:
在“package.json”上右击,选择“运行 install”,作用等同于切换到项目根目录,然后运行:
npm install
安装完成后,资源管理器中出现了“node_modules”文件夹,里面存放的是依赖包,如下图所示:
NPM脚本对应的是package.json中的
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
}
这个可以理解为开发调试。
如下图,在dev上右击,选择运行:
终端出现如下图显示:
则运行,项目成功。
在浏览器中打开“http://localhost:5173/”,出现如下图:
说明能够正常访问。
这个是编译构建项目,默认编译输出到dist。
如下图,在build上右击,选择运行
终端中如下图所示:
说明编译完成,同时在截图中也看到编译输出到了dist目录。下图所示是资源管理器中的dist目录:
这个可以理解为预览项目,做正确性验证。这个对于目前的学习影响不大,故不做说明。
这是文件规则检查,并修改。后面会稍微说明一下。
这是做文件格式美化的,并自动修改。后面会稍微说明一下。