## Vue腳手架安裝搭建
操作系統：Windows 11 專業工作站
記錄時間：2022年2月18日
在安裝之前，需要安裝node.js（Node.js (nodejs.org)），否則無法使用npm
安裝
npm i -g @vue/cli
升級
npm update -g @vue/cli
查看當前腳手架版本
vue -V
安裝指定版本腳手架
npm i -g @vue/cli@版本號
在cmd中創建一個項目
vue create projectName
選擇版本
上下方向鍵選擇，回車鍵確認
選擇自己配置項目時，如果還沒選好配置就摁下了回車，可 Ctrl+D 退出創建
安裝項目其他依賴項
方式1
npm i --save 需要安裝的依賴名字
方式2
vue add 需要安裝的依賴名字
使用vue-ui進行創建/管理項目
vue ui
點擊“在此創建新項目”
如果選擇手動，則自己配置項目
運行
切換到創建項目的文件
cd projectName
運行項目
方法1：npm
npm run serve
方式2：yarn
yarn serve
查看項目默認安裝的依賴
npm ls --depth 0
關閉項目
在cmd中按下ctrl+c
打包項目
npm run build
文件目錄解析
node_modules：node安裝的依賴包（vue腳手架程序很大是因為配置了node依賴包，****真正項目的本體是打包過后的dist文件夾）
dist：打包后的文件夾
public：公共靜態資源；任何放置在public的靜態資源都會被簡單的復制，而不經過webpack的處理。****一般用來存放不會改變的靜態資源和webpack文件和不支持的第三方庫
- favicon.ico：默認圖標
- index.html：（vue腳手架有特定的文件格式，打包的時候會識別這些格式這個文件名不可改，如果改了，運行時會報錯
如果要改，還需要修改相應的配置文件才行）
- src：存放代碼的文件及文件夾（在這個文件夾中進行開發、寫代碼）
- asscts：存儲項目中的靜態文件（圖片/字體/css等等）
- components：存放項目中的自定義組件（小組件以及公共組件）
- views：存放大組件，頁面級組件，路由級別的組件
- router：存放路由（VueRouter）相關文件
- store：存儲Vuex（狀態管理器）相關文件
- App.vue：項目的根組件（項目所展示的頁面）
- main.js：項目的入口文件
- .gitignore：git忽略文件（因為git上傳會忽略空文件夾）
- babel.config.js：babel相關配置文件（將es6語法轉為瀏覽器能夠識別的代碼）
- package.json：vue腳手架描述文件，相關信息以及運行、打包指令、插件信息都在這里
- README.md：項目說明
安裝腳手架額外插件：
在腳手架目錄新建一個.js文件（與package.json文件同級）：
//配置信息
module.exprots = { //模塊導出
//需要安裝的插件:
devServer:{ //配置信息
port: 8080, //端口號
host: 'localhostl', //地址
open: true //自動打開瀏覽器
}
}
vue腳手架文件夾及文件詳解：
main.js文件內容詳解：
//es6引入文件
import Vue from 'vue' //引入vue
import App from './App.vue' //引入App.vue頁面
/*
productionTip設置為 false ，可以阻止 vue 在啟動時生成生產提示
開發環境下，Vue 會提供很多警告來幫你對付常見的錯誤與陷阱。
而在生產環境下，這些警告語句卻沒有用，反而會增加應用的體積。
此外，有些警告檢查還有一些小的運行時開銷，這在生產環境模式下是可以避免的
*/
Vue.config.productionTip = false
//這個vue實例加載方式是典型的es6寫法
new Vue({
router,//掛載路由
store,//掛載Vuex狀態管理
render: h => h(App) //render渲染;加載app.vue頁面;h代表hypersript（超腳本）
}).$mount('#app') //將這個vue實例手動掛載到#app
App.vue（單文件組件）頁面詳解：
//組件內容（頁面展示內容）
<template>
<div id='app'>
...
</div>
</template>
//組件控制區
<script>
import 組件名 from './components/小組件名.vue'//引入小組件
//全局組件定義
Vue.component(
'組件名',
組件名
);
export default{//暴露出當前根組件叫'APP',且上面的根節點是'app'
name: 'App',
data(){
return{
//存放組件數據
}
}
components:{//定義局部組件，即子組件
組件名:{
template:xxx
}
}
}
</script>
//style樣式;注意：這里的樣式以及views和components組件的樣式都是全局樣式
//如果不通過單獨添加樣式名設置樣式，則會作用到所有相應的標簽上
//可以通過添加scoped聲明此樣式只此文件用
<style scoped lang="sass">//lang="使用什么css預處理語言"
...
</style>
router文件夾下面的index.js文件詳解：
//導入文件
import...
//路由內容
const routes = [
...
]
//路由實例化
const router = new VueRoutter({
routes
})
//導出
export default router
views文件夾：
存放大型頁面級組件
//頁面內容
<template>
<定義的小組件名 msg="傳給小組件的值"/>
</template>
//js代碼
<script>
//引入小組件
import 小組件名 from '小組件路徑'
//定義小組件
export default{
name: '組件名',
comoponets:{
小組件名
}
}
</script>
components文件夾：
存放頁面內的各種小組件
//頁面內容
<template>
小組件內容（html代碼）
</template>
//js代碼
export default{
name: '小組件名',//不要使用_進行命名，因為還需要在標簽中使用
props: { //組件數據
msg:String //定義傳過來的數據類型
} //也可以不定義數據類型
}
//css代碼
<style>
...
</style>
asscts文件夾：
存儲項目中的所有靜態文件（圖片及字體文件等等）