乐趣区

关于vue.js:抛开脚手架搭建vue工程

jiezi

平台的各位大佬专家们，大家好😀😀😀, 自己是以后平台的小萌新。本期给大家带来第一篇文章——抛开脚手架搭建 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的单文件编译编译的库，将文件编译成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')

成果

总结

本期分享了 vue 如何疾速搭建一个工程化的我的项目，并且是十分的轻量级的。搭建我的项目的的次要步骤是：

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

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

退出移动版