共计 3152 个字符，预计需要花费 8 分钟才能阅读完成。
平台的各位大佬专家们，大家好😀😀😀, 自己是以后平台的小萌新。本期给大家带来第一篇文章——抛开脚手架搭建
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')
最终成果
vue3 我的项目搭建
有了
vue2的根底，搭建vue3我的项目也是十分轻松的。
搭建
搭建 vue3 我的项目，只是和 vue2 装置的包不一样。经此而已哦！😉😉😉
vue3：vue3和外围库，外面蕴含了reactive、runtime-core和complier-core等@vue/compiler-sfc:vue3的单文件编译编译的库，将文件编译成jsvite: 构建工具@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')成果
总结
本期分享了 vue 如何疾速搭建一个工程化的我的项目，并且是十分的轻量级的。搭建我的项目的的次要步骤是：
- 装置对应的依赖，依赖分为三步骤，外围依赖库，构建工具库，
.vue文件的编译库 - 在每个文件编写对应的配置，即可实现一个轻量级的
vue脚手架的搭建
当然，有的同学会问这个从哪里来的，那就请看这里吧
