theme: vue-pro
平台的各位大佬专家们，大家好😀😀😀,本人是当前平台的小萌新。本期给大家带来第一篇文章——抛开脚手架搭建
vue工程
项目搭建是一个很常见的需求，为了解决这个需求。vue 官方也做了很多的努力,比如： vue-cli,vite等等。各位是不是以为博主要把vue-cli和vite的文档给拿过来，抄一遍。no,本人抱着分享技术而且，官网里面有的，大家可以去参考对应的文档：
-
vue-cli： https://cli.vuejs.org/zh/guide/ -
vite: https://cn.vitejs.dev/guide/
在上面的两个官方地址中会有详细的说明。
这里来带着大家来用最简单安装包的方式，一步一步实现一个可用于测试包的项目环境,简单的说就是搭建一个非常轻量级的项目，因为在年限不多的大部分程序员中，都会想要有一个轻量级的demo来进行深度学习和开发。当然，有的会问这个有啥作用。如果你发布一个包并且需要写测试案列。这种项目就会非常有用，毕竟大家都不想要有一个那么重的环境。
vue2搭建
请思考一个问题，搭建一个vue工程化的项目，最少使用几个包就能完成？
有人可能会说3个5个啥的，答案先不着急。请跟着节奏往下看。
分析
搭建vue的工程项目，
-
vue肯定是少不了的； -
vue工程里面写的是vue的模板文件或者是jsx,当然您也可以使用原生的js，使用h和render函数的方式来编写代码，但是一般来说工程化都会使用额外的语法来编写便于维护的代码。所以这里咋们还需要一个complier(编译器) - 既然是前端的工程化的项目，那肯定也会使用构建工具了，如：
webpack,vite等.
有了这
3步操作，vue的工程化项目就可以搭建起来了。快来一起来动手试试吧😀😀😀
搭建
对于vue2的项目，咋们来安装下下面的包：
vue：vue2代码的核心包vue-template-compiler: 编译vue代码的包@vue/cli-service: 构建工具，这里有人说不用webpack,vue-cli里面就是继承了webpack哦！
npm install vue@2 -S
npm install vue-template-compiler @vue/cli-service -D
安装完成后，来建立一些文件夹：
在根目录下面建立src和public两个文件,然后建立对应的文件。最终的目录结构如下：
vue2-simple-pro // 项目名称
├─ package.json // 启动入口
├─ npm-lock.yaml // 依赖锁文件
├─ public // 公共文件，不会参与打包的
│ └─ index.html // 最终渲染的html文件
└─ src // 核心功能文件
├─ App.vue // 根节点文件
└─ main.js // 入口js，挂载vue的节点
有了目录，要想让这个功能跑起来也是很简单的哦！
package.json中添加启动和打包命令
"script":{
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
index.html里面就是需要包含一个<div id="app"></div> 即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue 里面要包含的内容就更简单了，只需要一个vue2的模板即可
<template>
<div id="app">
<div>{{ message }}</div>
</div>
</template>
<script>
export default {
el: '#app',
data: () => ({
message: 'hello vue2 pro'
})
}
</script>
main.js中需要包含挂载节点即可
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
最终效果
[图片上传失败...(image-ae29f8-1665227454705)]
vue3 项目搭建
有了
vue2的基础，搭建vue3项目也是非常轻松的。
搭建
搭建vue3项目，只是和vue2安装的包不一样。经此而已哦！😉😉😉
-
vue3：vue3和核心库，里面包含了reactive、runtime-core和complier-core等 -
@vue/compiler-sfc:vue3的单文件编译编译的库，将文件编译成js -
vite: 构建工具 -
@vitejs/plugin-vue: 帮助vite来解析.vue文件的插件
npm install vite @vue/compiler-sfc -D
npm install vue
安装好依赖后，就可以来看看咋们的目录结构的样子吧😀😀😀
vue3-simple-pro // 项目名称
├─ index.html // html节点挂载的地方
├─ package.json // 入口
├─ npm-lock.yaml // 依赖锁文件
└─ src // 核心内容
│ ├─ App.vue // 跟节点
│ └─ main.js // 挂载节点
└─ vite.config.js // vite的配置文件
有了目录树，里面需要添加的内容也是非常简单哦！
package.json中还是加入对应的启动命令，只是命令不一样而已！
"scripts": {
"dev": "vite",
"build": "vite build"
}
index.html 除了上面的<div id="app"></div>外，还需要加上使用module 来导入main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./src/main.js" type="module"></script>
</body>
</html>
App.vue里面是一个根节点，内容可以非常简单，只需要满足vue的语法即可
<template>
<div>{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('hello vue3 pro')
</script>
main.js中的作业也是一样，导入vue并且挂载节点.
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
效果
[图片上传失败...(image-9dda27-1665227454705)]
总结
本期分享了vue如何快速搭建一个工程化的项目，并且是非常的轻量级的。搭建项目的的主要步骤是：
- 安装对应的依赖，依赖分为三步骤，核心依赖库，构建工具库，
.vue文件的编译库 - 在每个文件编写对应的配置，即可完成一个轻量级的
vue脚手架的搭建
当然，有的同学会问这个从哪里来的，那就请看这里吧
