Vue腳手架建立專案目錄詳解
文章內容參考: https://www.cnblogs.com/chenleideblog/p/10432375.html
Vue專案的建立
使用圖形介面建立Vue專案
# 安裝vue
npm install -g @vue/cli
# 進入DOS終端
vue ui
# 自定義建立專案
...
Vue目錄分析
以下就專案資料夾中的各檔案的作用進行介紹:
├── build/ # Webpack 配置目錄 ├── dist/ # build 生成的生產環境下的專案 ├── config/ # Vue基本配置檔案,可以設定監聽埠,打包輸出等 ├── node_modules/ # 依賴包,通常執行npm i會生成 ├── src/ # 原始碼目錄(開發的專案檔案都在此檔案中寫) │ ├── assets/ # 放置需要經由 Webpack 處理的靜態檔案,通常為樣式類檔案,如css,sass以及一些外部的js │ ├── components/ # 公共元件 │ ├── filters/ # 過濾器 │ ├── store/ # 狀態管理 │ ├── routes/ # 路由,此處配置專案路由 │ ├── services/ # 服務(統一管理 XHR 請求) │ ├── utils/ # 工具類 │ ├── views/ # 路由頁面元件 │ ├── App.vue # 根元件 │ ├── main.js # 入口檔案 ├── index.html # 主頁,開啟網頁後最先訪問的頁面 ├── static/ # 放置無需經由 Webpack 處理的靜態檔案,通常放置圖片類資源 ├── .babelrc # Babel 轉碼配置 ├── .editorconfig # 程式碼格式 ├── .eslintignore # (配置)ESLint 檢查中需忽略的檔案(夾) ├── .eslintrc # ESLint 配置 ├── .gitignore # (配置)在上傳中需被 Git 忽略的檔案(夾) ├── package.json # 本專案的配置資訊,啟動方式 ├── package-lock.json # 記錄當前狀態下實際安裝的各個npm package的具體來源和版本號 ├── README.md # 專案說明(很重要,便於其他人看懂)
我們以後用到最多的就是src資料夾,因為我們編寫的程式碼要放在裡面
在根目錄下存在index.html檔案
在src目錄下存在main.js,App.vue以及在router資料夾下存在index.js
index.html---主頁,專案入口
index.html為專案訪問的首站點,一般我們之定義一個空的根節點,在main.js裡面定義的例項將掛載到根節點下,內容都通過vue元件來進行填充。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>首頁title</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
App.vue---根元件
我們在Vue中要經常建立字尾名為.vue的檔案,.vue的檔案通常由三部分構成,分別用
<template> <!-- 元件程式碼區域--> <div id="app"> <router-view></router-view> </div> </template> <script> // 這裡用於定義Vue元件的業務邏輯 export default { data: (){ // 私有資料 return {} }, methods: {}, //處理函式 }, // ...其他業務邏輯 </script> <!--scoped 的作用: 防止樣式元件之間的衝突,作用域:當前檔案--> <style scoped> 樣式程式碼區域 </style>
我們可以將上述三個部分理解為原來我們學習前端的html,javascript與css三個部分。
補充:
【template】
其中模板只能包含一個父節點,也就是說頂層的div只能有一個(例如上圖,父節點為#app的div,其沒有兄弟節點)
打一個比喻吧,
【script】
vue通常用es6來寫,用export default匯出,其下面可以包含資料data,生命週期(mounted等),方法(methods)等。
【style】
樣式通過style標籤包裹,預設是影響全域性的,如需定義作用域只在該元件下起作用,需在標籤上加scoped,
如要引入外部css檔案
首先需給專案安裝css-loader依賴包,開啟cmd,進入專案目錄,輸入npm install css-loader,回車。
安裝完成後,就可以在style標籤下import所需的css檔案。
這樣,我們就可以把style下的樣式封裝起來,寫到css資料夾,再引入到頁面使用
<style>
import './assets/css/public.css'
</style>
main.js---入口檔案
main.js主要是引入vue框架,根元件及路由設定,並且定義vue例項
下圖中的components:{App}就是引入的根元件App.vue
後期還可以引入外掛,當然首先得安裝外掛。
import Vue from 'vue' /*引入vue框架*/
import ElementUI from 'element-ui' /*引入element-ui樣式*/
import App from './App' /*引入根元件*/
import router from './router' /*引入路由設定*/
Vue.config.productionTip = false /*關閉生產模式下給出的提示*/
/*定義一個新例項*/
new Vue({
router,
render: h => h(App) // 使用render函式渲染App.vue單檔案元件
}).$mount('#app') // 將該例項掛載到 #app中
index.js---路由配置
在router資料夾下,有一個index.js檔案,即為路由配置檔案。
import Vue from 'vue' /*引入vue框架*/
import Router from 'vue-router' /*引入路由依賴*/
import Hello from ‘@、components/Hello’ /*引入頁面元件,命名為Hello*/
Vue.use(VueRouter) /*使用路由依賴*/
/*定義路由*/
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
routes
})
這裡定義了路徑為'/'的路由,該路由對應的頁面是Home元件,所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Home元件.類似的,我們可以設定多個路由,‘/index’,'/list'之類的,當然首先得引入該元件,再為該元件設定路由