目录
- 前言
- 使用yarn 新建vite项目
- 1. 打开命令行工具
- 2. 执行 `yarn create vite`
- 3. 指定项目名 **banxia-blog-frontend**
- 4. 选择框架**Vue**,通过上下箭头选择，**使用空格确定**。
- 5. 选择**javascript**,空格确定
- 6. 项目创建完成
- 7. 使用vscode打开项目，并新建终端
- 8. 执行`yarn`,安装依赖
- 9. 执行`yarn dev`,启动项目
- 项目结构分析
- 单页面应用
- index.html
- main.js
- 安装Element Plus
- 使用包管理器
- 完整引入
- type="module"的作用
🧨🧨🧨
大家好，我是搞前端的半夏 🧑，一个热爱写文的前端工程师 💻.
如果喜欢我的文章，可以关注 ➕ 点赞 👍 一起学习交流前端，成为更优秀的工程师～ 更多故事—点我探索新世界！ 🧨🧨🧨本专栏以搭建一个个人博客为目标，从前后端开发的开发，云服务的配置，到最后的打包上线。通过一个完整的项目，让小伙伴们建立起对前后端分离开发的整体认知。
本专栏会是一个详尽的实战教程，注重项目细节的讲解，保证每一篇文章都能被清晰的理解。有不理解的地方，可以在评论区中指出。
前言
从本文开始，项目正式开始！！！
在如今的前端开发中，大厂基本使用React，小厂主要使用Vue。Vue易上手，心智负担地，所以成为很多企业的前端框架首选。
无论你是前端还是后端，我都建议你先学习Vue。目前Vue有两个版本：Vue2和Vue3。 既然是学习，那我们就选择最新版本的Vue学习。
较Vue2，Vue3的最大优点就是推出了·Composition API·。更具体的请仔细阅读官方文档：https://cn.vuejs.org/guide/introduction.html。
目前市面主流的是两种Vue3的开发方式是：Webpack+Vue3 和Vite+vue3。本项目采用Vite+Vue3的组合方式进行前端开发，主要还是因为Vite贼**快。
在正式开始之前，大家需要先安装好node和yarn。这里我推荐yarn来进行依赖包的管理。
使用yarn 新建vite项目
1. 打开命令行工具
使用win+r 快捷键，运行cmd。使用盘符:，进入对应的磁盘。使用cd命令进入对应的文件夹。
2. 执行 yarn create vite
3. 指定项目名 banxia-blog-frontend
4. 选择框架Vue,通过上下箭头选择，使用空格确定。
5. 选择javascript,空格确定
6. 项目创建完成
创建的项目默认使用Vue3版本，且没有引入Vue-Router、Vuex等配套工具库。这些我们后期再装，如果你需要在创建项目的时候就安装的话，可以使用上一步的Customize with crteat-vue来创建项目。
7. 使用vscode打开项目，并新建终端
8. 执行yarn,安装依赖
9. 执行yarn dev,启动项目
项目结构分析
下图是生成的项目结构图：
node_modules: 项目依赖包
public: 与index.html配套使用的资源文件，例如facvion(网页图标）
src整个项目的核心代码文件
assets: 资源文件
components: 组件
app.vue: 根组件
main.js：入口
style: 全局用的CSS，通常存放CSS Reset文件
.gitignore： git 提交忽略目录文件
index.html: 网页入口，所有的组件都会加载到其内部的<div id="app"></div>标签下。
package.json： 项目依赖的配置文件
vite.config.js: Vite配置文件
yarn.lock: 锁定依赖版本文件
单页面应用
各种Vue教程都介绍Vue可以开发单页面应用，什么单页面，我就从这个项目中来解释一下！
index.html
首先是index.html文件,核心的代码就只有下面几行。
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>body里面前置了一个id为app的div标签，后面，我们编写的所有组件都会加载到这个div内部。同时还引入了src下的main.js。
那Vue是加载组件到这个div标签内部的呢？主要秘密都在引入的main.js。
main.js
在main.js中，有下面这行代码，其中mounted函数接受了一个#app,这里的#app代表的就是上面的div标签。
createApp(App).mount('#app')mount函数的代码如下：
mount接受一个根容器rootContainer
mount(rootContainer: HostElement, isHydrate?: boolean): any {
// 判断下 isMounted 挂载状态
if (!isMounted) {
// 挂载时 获取整棵树 的 vnode
// createApp(base).mount('#app')
// 虚拟 DOM 创建方法
const vnode = createVNode(
rootComponent as ConcreteComponent,
rootProps
)
// 将初始化上下存储在 根节点的 appContext 属性上
vnode.appContext = context
if (isHydrate && hydrate) {
hydrate(vnode as VNode<Node, Element>, rootContainer as any)
} else {
// TODO 渲染器传入的vnode 生成 node 挂载到根节点
render(vnode, rootContainer)
}
// 修改标记已挂载
isMounted = true
// 绑定根节点元素
app._container = rootContainer
;(rootContainer as any).__vue_app__ = app
// 返回 Vue 的实例
return vnode.component!.proxy
}
},如果你使用Vue-cli创建基于webpack+Vue3 +_Vue-Router的项目。你会发现在app.vue中的代码也有#app,这里的app与index.html、main.js里面的完全没关系。你可以随意修改名称。需要注意的是，如果你使用了vue-router,app.vue中会自动生成<router-view/>标签，Vue项目会根据路由将组件挂到<router-view/>,然后再挂在上面的#app
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>安装Element Plus
Element Plus是基于 Vue 3，面向设计师和开发者的组件库。
Element Plus 可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。 如果您确实需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill 。
由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器。
使用包管理器
我们建议您使用包管理器（如 NPM、Yarn 或 pnpm）安装 Element Plus，然后您就可以使用打包工具，例如 Vite 或 webpack。
# 选择一个你喜欢的包管理器
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus完整引入
如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')type="module"的作用
我们知道，在script标签中写js代码，或者使用src引入js文件时，默认不能使用module形式，即不能使用import导入文件，但是我们可以再script标签上加上type=module属性来使用import的方式引入文件。
