拋開腳手架搭建vue工程

theme: vue-pro

平臺(tái)的各位大佬專家們，大家好??????,本人是當(dāng)前平臺(tái)的小萌新。本期給大家?guī)淼谝黄恼隆?strong>拋開腳手架搭建vue工程

項(xiàng)目搭建是一個(gè)很常見的需求，為了解決這個(gè)需求。vue 官方也做了很多的努力,比如： vue-cli,vite等等。各位是不是以為博主要把vue-cli和vite的文檔給拿過來，抄一遍。no,本人抱著分享技術(shù)而且，官網(wǎng)里面有的，大家可以去參考對應(yīng)的文檔：

在上面的兩個(gè)官方地址中會(huì)有詳細(xì)的說明。

這里來帶著大家來用最簡單安裝包的方式，一步一步實(shí)現(xiàn)一個(gè)可用于測試包的項(xiàng)目環(huán)境,簡單的說就是搭建一個(gè)非常輕量級(jí)的項(xiàng)目，因?yàn)樵谀晗薏欢嗟拇蟛糠殖绦騿T中，都會(huì)想要有一個(gè)輕量級(jí)的demo來進(jìn)行深度學(xué)習(xí)和開發(fā)。當(dāng)然，有的會(huì)問這個(gè)有啥作用。如果你發(fā)布一個(gè)包并且需要寫測試案列。這種項(xiàng)目就會(huì)非常有用，畢竟大家都不想要有一個(gè)那么重的環(huán)境。

vue2搭建

請思考一個(gè)問題，搭建一個(gè)vue工程化的項(xiàng)目，最少使用幾個(gè)包就能完成？

有人可能會(huì)說3個(gè)5個(gè)啥的，答案先不著急。請跟著節(jié)奏往下看。

分析

搭建vue的工程項(xiàng)目，

  • vue肯定是少不了的；
  • vue工程里面寫的是vue的模板文件或者是jsx,當(dāng)然您也可以使用原生的js，使用h和render函數(shù)的方式來編寫代碼，但是一般來說工程化都會(huì)使用額外的語法來編寫便于維護(hù)的代碼。所以這里咋們還需要一個(gè)complier(編譯器)
  • 既然是前端的工程化的項(xiàng)目，那肯定也會(huì)使用構(gòu)建工具了，如：webpack,vite 等.

有了這3步操作，vue的工程化項(xiàng)目就可以搭建起來了。快來一起來動(dòng)手試試吧??????

搭建

對于vue2的項(xiàng)目，咋們來安裝下下面的包：

  • vue： vue2代碼的核心包

  • vue-template-compiler: 編譯vue代碼的包

  • @vue/cli-service: 構(gòu)建工具，這里有人說不用webpack,vue-cli里面就是繼承了webpack哦！

npm install vue@2 -S
npm install vue-template-compiler @vue/cli-service -D

安裝完成后，來建立一些文件夾：

在根目錄下面建立src和public兩個(gè)文件,然后建立對應(yīng)的文件。最終的目錄結(jié)構(gòu)如下：

vue2-simple-pro       // 項(xiàng)目名稱
├─ package.json       // 啟動(dòng)入口
├─ npm-lock.yaml      // 依賴鎖文件
├─ public             // 公共文件，不會(huì)參與打包的
│  └─ index.html      // 最終渲染的html文件
└─ src                // 核心功能文件
   ├─ App.vue         // 根節(jié)點(diǎn)文件
   └─ main.js         // 入口js，掛載vue的節(jié)點(diǎn)

有了目錄，要想讓這個(gè)功能跑起來也是很簡單的哦！

package.json中添加啟動(dòng)和打包命令

"script":{
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
}

index.html里面就是需要包含一個(gè)<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 里面要包含的內(nèi)容就更簡單了，只需要一個(gè)vue2的模板即可

<template>
  <div id="app">
    <div>{{ message }}</div>
  </div>
</template>
    
<script>
export default {
  el: '#app',
  data: () => ({
    message: 'hello vue2 pro'
  })
}
</script>

main.js中需要包含掛載節(jié)點(diǎn)即可

import Vue from 'vue'
import App from './App.vue'
new Vue({
  render: h => h(App),
}).$mount('#app')

最終效果

[圖片上傳失敗...(image-ae29f8-1665227454705)]

vue3 項(xiàng)目搭建

有了vue2的基礎(chǔ)，搭建vue3項(xiàng)目也是非常輕松的。

搭建

搭建vue3項(xiàng)目，只是和vue2安裝的包不一樣。經(jīng)此而已哦！??????

  • vue3： vue3和核心庫，里面包含了reactive、runtime-core和complier-core等
  • @vue/compiler-sfc: vue3的單文件編譯編譯的庫，將文件編譯成js
  • vite: 構(gòu)建工具
  • @vitejs/plugin-vue: 幫助vite來解析.vue文件的插件
npm install vite @vue/compiler-sfc -D
npm install vue

安裝好依賴后，就可以來看看咋們的目錄結(jié)構(gòu)的樣子吧??????

vue3-simple-pro         // 項(xiàng)目名稱
├─ index.html           // html節(jié)點(diǎn)掛載的地方
├─ package.json         // 入口
├─ npm-lock.yaml        // 依賴鎖文件
└─ src                  // 核心內(nèi)容
│  ├─ App.vue           // 跟節(jié)點(diǎn)
│  └─ main.js           // 掛載節(jié)點(diǎn)
└─ vite.config.js       // vite的配置文件

有了目錄樹，里面需要添加的內(nèi)容也是非常簡單哦！

package.json中還是加入對應(yīng)的啟動(dòng)命令，只是命令不一樣而已！

 "scripts": {
    "dev": "vite",
    "build": "vite build"
  }

index.html 除了上面的<div id="app"></div>外，還需要加上使用module 來導(dǎo)入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里面是一個(gè)根節(jié)點(diǎn)，內(nèi)容可以非常簡單，只需要滿足vue的語法即可

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('hello vue3 pro')
</script>

main.js中的作業(yè)也是一樣，導(dǎo)入vue并且掛載節(jié)點(diǎn).

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

效果

[圖片上傳失敗...(image-9dda27-1665227454705)]

總結(jié)

本期分享了vue如何快速搭建一個(gè)工程化的項(xiàng)目，并且是非常的輕量級(jí)的。搭建項(xiàng)目的的主要步驟是：

  1. 安裝對應(yīng)的依賴，依賴分為三步驟，核心依賴庫，構(gòu)建工具庫，.vue文件的編譯庫
  2. 在每個(gè)文件編寫對應(yīng)的配置，即可完成一個(gè)輕量級(jí)的vue腳手架的搭建

當(dāng)然，有的同學(xué)會(huì)問這個(gè)從哪里來的，那就請看這里吧

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容