繼上一章[Vue.js教學筆記]Webpack模組整合工具之安裝,成功產生出Webpack之hello world專案後,這裡要簡單介紹裏頭的文件架構與重要內容,文件架構如下
|-build/ #編譯配置資料夾
|--build.js #build.js配置
|--check-versions.js #check-versions.js配置
|--dev-client.js #dev-client.js配置
|--dev-server.js #dev-server.js配置
|--utils.js #utils.js配置
|--vue-loader.conf.js #vue-loader.conf.js配置
|--webpack.base.conf.js #webpack.base.conf.js配置
|--webpack.dev.conf.js #webpack.dev.conf.js配置
|--webpack.prod.conf.js #webpack.prod.conf.js配置
|-config/ #項目配置資料夾
|--dev.env.js #dev.env.js配置
|--index.js #index.js配置
|--prod.env.js #prod.env.js配置
|-dist/ #編譯完成檔案資料夾
|--static/ #靜態資源
|---css/ #css資料夾
|----......
|---js/ #js資料夾
|----......
|--index.html #index.html模版
|-node_modules/ #node modules模組
|-src/ #專案開發資料夾
|--assets/ #模塊靜態資源，會被webpack打包
|--components/ #ui組件資料夾
|---Hello.vue #Hello.vue為ui組件開發之.vue文件
|--router/ #路由器資料夾
|---index.js #路由器配置
|--App.vue #app主組件
|--main.js #app入口文件
|-static/ #純靜態資源，打包是直接被複製
|-.babelrc #.babelrc配置
|-.editorconfig #.editorconfig配置
|-.gitignore #.gitignore配置
|-.postcssrc.js #.postcssrc.js配置
|-index.html #index.html模版
|-package.json #命令和安裝列表
|-README.md #此專案安裝過程資訊
上述是全部Webpack資料夾架構介紹,接下來介紹在撰寫程式會用到的資料與檔案,在上一章有使用npm run dev這指令,這指令會同時開啟index.html(index.html模版)與
main.js(app入口文件)這兩個檔案,而main.js(app入口文件)也會同時運行App.vue(app主組件)與router/(路由器資料夾)中的index.js(路由器配置),在App.vue(app主組件)
中<img src="./assets/logo.png">這圖片載入標籤可以移除,以及在<style></style>標籤下的css程式一併移除,只需要<router-view></router-view>路由器顯示標籤即可
在來看index.js(路由器配置)程式,很明顯可看出是去執行在components(ui組件資料夾)中的Hello.vue
從上述整個程式運行可以很清楚知道,在程式撰寫可以在components(ui組件資料夾)裡進行,無論是修改Hello.vue與增加其他.vue進行撰寫,而增加其他.vue要運行顯示就要去修改index.js(路由器配置),例如在components(ui組件資料夾)增加test01.vue檔,如下所示,
test01.vue的code如下,顯示大小30px,紅色的Hello World!!
<template>
<div class="active">{{message}}</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello World!!'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active{
color:red;
font-size: 30px;
}
</style>
在index.js(路由器配置)中增加import test01 from '@/components/test01',在path增加test01路徑,再做修改相對應的名稱,如下所示,
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import test01 from '@/components/test01'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/test01',
name: 'test01',
component: test01
}
]
})
接下來在網址後面加上/test01就會顯示出來,如下所示,
留言列表
