平台的各位大佬专家们，大家好,自己是以后平台的小萌新。本期给大家带来第一篇文章——抛开脚手架搭建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 -Snpm 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的单文件编译编译的库，将文件编译成js
  • vite: 构建工具
  • @vitejs/plugin-vue: 帮忙vite来解析.vue文件的插件
npm install vite @vue/compiler-sfc -Dnpm 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如何疾速搭建一个工程化的我的项目，并且是十分的轻量级的。搭建我的项目的的次要步骤是：

  1. 装置对应的依赖，依赖分为三步骤，外围依赖库，构建工具库，.vue文件的编译库
  2. 在每个文件编写对应的配置，即可实现一个轻量级的vue脚手架的搭建

当然，有的同学会问这个从哪里来的，那就请看这里吧