目錄
一、創建vue項目
1.下載vue
2.進入剛才創建的項目
3.安裝依賴
4.運行項目
?5.打包項目放入生產環境
二、vue項目組成
1.項目文件結構
2.項目重要文件
Vue (發音為 /vju?/，類似?view) 是一款用于構建用戶界面的 JavaScript 框架。它基于標準 HTML、CSS 和 JavaScript 構建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發用戶界面。無論是簡單還是復雜的界面，Vue 都可以勝任。
vue官網鏈接
https://cn.vuejs.org/guide/introduction.html
邊看本文邊在線練習單獨的一個vue文件，點擊這個鏈接。
在線練習編輯Vue文件https://play.vuejs.org/#eNp9kVFLwzAQx7/KeS9TmBuiT6MOVAbqg4oKvuSltLeuM01CcpmF0u/utaXVhzEISe7/vyS/yzV459ziEAlXmITMl47XylDtrGfIaZtGzdAoA5CnnJ5fDHsATxy9GSOAKhQrmD2S1ha+rNf52Wyw2m6RSUaynB6QgKlyOmWSCCDZXa2bprsF2jZZStSrpXGR4XBZ2Zz0rULxFYqVLKfTOEcOmTXbsljsgzVSRw+lMLOVKzX5V8elNUHhasRVmArnz3OvsY80H/VsR9n3EX0f6k5T+OYpkD+Qwsnj1BfEg735eKFa9pMp5FFL9gnznYLVsWMc0u6jyQX7X15P+1R1PSlN8Rk2NZMJY1EdaP/Jfb5CaebDidL/cK8XN2NzsP0F+HSp8w==
一、創建vue項目
前提：已安裝 18.3 或更高版本的Node.js，如果沒有安裝Node.js看這個文章。
安裝Node.jshttps://blog.csdn.net/zxy19931069161/article/details/138838537?spm=1001.2014.3001.5501在想創建vue項目的文件夾下打開cmd或者用編輯器進入終端：
1.下載vue
npm create vue@latest
輸入項目名稱vue-project，然后一直回車就可以。生成的項目中的示例組件使用的是組合式API?和?<script setup>，而非選項式API。
2.進入剛才創建的項目
cd vue-project? ? ? //vue-project?替換成你的項目名稱3.安裝依賴
npm install4.運行項目
npm run dev
運行起來的項目頁面：
5.打包項目放入生產環境
npm run build此命令會在?./dist?文件夾中為你的應用創建一個生產環境的構建版本。將dist文件夾放入生產環境即可。
二、vue項目組成
1.項目文件結構
2.項目重要文件
①index.html：
這個頁面只需要改一個名字，后續開發中也不需要對其進行編輯。
②main.js：
這個頁面很重要，它初始化vue，所有需要用的文件都需要從這里引入，比如引入樣式element-plus、引入vuex、引入router等以及全局組件注冊等。
因為剛創建的vue項目，所以它現在內容很少，后續會越來越多。
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')- createApp(App)：以App作為參數生成一個應用實例對象
- mount(‘#app’)：掛載到id為app節點上。
③App.vue:
app.vue是vue頁面資源的首加載項，是主組件，頁面入口文件，所有頁面都是在app.vue下進行切換的；app.vue負責構建定義及頁面組件歸集。
app.vue文件的作用：1、一般就是指整個vue項目的根組件，用來展示組件中內容；2、app.vue是針對整個項目稱作根組件，template下的子元素是針對當前的vue實例稱作根組件。
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script><template><header><img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /></div></header><main><TheWelcome /></main>
</template><style scoped>
header {line-height: 1.5;
}.logo {display: block;margin: 0 auto 2rem;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}
}
</style>④vite.config.js:
vite.config.js?是在使用 Vite 作為構建工具的 Vue 項目中用來配置 Vite 行為的一個配置文件。這個文件通常位于項目的根目錄下。
vite.config.js?文件的主要作用是：
-
配置 Vite 服務器的選項，比如端口號、是否開啟熱重載、是否開啟 CSS 預處理器支持等。
-
配置插件，比如使用 Vite 插件來集成其他構建工具或功能。
-
配置別名，簡化文件引用路徑。
-
配置 Optimizations，比如引入生產環境特定的插件。
-
配置全局變量，在項目中直接使用而不需要import。
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},server: {port: 3000,open: true,},
})在這個配置中，我們引入了?defineConfig?方法來創建配置對象。我們還引入了?@vitejs/plugin-vue?插件來處理 Vue 文件，并設置了一個別名?@?指向項目 src 目錄。服務器配置中設置了端口號為 3000，并在啟動時自動打開瀏覽器。
