Vue小白課（二）——項目結構解析（Vue2.x）

時間 2019-11-07

標籤 vue 項目結構解析 vue2.x 简体版

原文原文鏈接

@Vue項目結構解析javascript

create by db on 2019-1-10 16:28:10
Recently revised in 2019-1-15 11:46:47css

Hello 小夥伴們，若是以爲本文還不錯，麻煩點個贊或者給個 star，大家的贊和 star 是我前進的動力！GitHub 地址html

查閱網上諸多資料，並結合本身的學習經驗，寫下這篇Vue學習筆記，以記錄本身的學習心得。現分享給你們，以供參考。前端

做爲一隻前端菜鳥，這是我掘金分享的第五篇文章。若有不足，還請多多指教，謝謝你們。vue

前言

在上一篇項目搭建文章中，咱們已經下載安裝了node環境以及vue-cli，而且已經成功構建了一個vue-cli項目——見Vue小白課（一）——CLI搭建項目（Vue2.x）。那麼接下來，咱們來梳理一下vue-cli項目的結構。java

參考文獻：node

正文

Vue項目結構一覽

├── build --------------------------------- 項目構建(webpack)相關配置文件，配置參數什麼的，通常不用動 
│   ├── build.js --------------------------webpack打包配置文件
│   ├── check-versions.js ------------------------------ 檢查npm,nodejs版本
│   ├── dev-client.js ---------------------------------- 設置環境
│   ├── dev-server.js ---------------------------------- 建立express服務器，配置中間件，啓動可熱重載的服務器，用於開發項目
│   ├── utils.js --------------------------------------- 配置資源路徑，配置css加載器
│   ├── vue-loader.conf.js ----------------------------- 配置css加載器等
│   ├── webpack.base.conf.js --------------------------- webpack基本配置
│   ├── webpack.dev.conf.js ---------------------------- 用於開發的webpack設置
│   ├── webpack.prod.conf.js --------------------------- 用於打包的webpack設置
├── config ---------------------------------- 配置目錄，包括端口號等。咱們初學可使用默認的。
│   ├── dev.env.js -------------------------- 開發環境變量
│   ├── index.js ---------------------------- 項目配置文件
│   ├── prod.env.js ------------------------- 生產環境變量
│   ├── test.env.js ------------------------- 測試環境變量
├── node_modules ---------------------------- npm 加載的項目依賴模塊
├── src ------------------------------------- 咱們要開發的目錄，基本上要作的事情都在這個目錄裏。
│   ├── assets ------------------------------ 靜態文件，放置一些圖片，如logo等
│   ├── components -------------------------- 組件目錄，存放組件文件，能夠不用。
│   ├── main.js ----------------------------- 主js
│   ├── App.vue ----------------------------- 項目入口組件，咱們也能夠直接將組件寫這裏，而不使用 components 目錄。
│   ├── router ------------------------------ 路由
├── static ---------------------------- 靜態資源目錄，如圖片、字體等。
├── .babelrc--------------------------------- babel配置文件
├── .editorconfig---------------------------- 編輯器配置
├── .gitignore------------------------------- 配置git可忽略的文件
├── index.html ------------------------------ 	首頁入口文件，你能夠添加一些 meta 信息或統計代碼啥的。
├── package.json ---------------------------- node配置文件，記載着一些命令和依賴還有簡要的項目描述信息 
├── .README.md------------------------------- 項目的說明文檔，markdown 格式。想怎麼寫怎麼寫，不會寫就參照github上star多的項目，看人家怎麼寫的
複製代碼

在webpack的配置文件裏，設置了main.js是入口文件，咱們的項目默認訪問index.html，這個文件裏面<div id="app"></div>和App.vue組件裏面的容器完美的重合了，也就是把組件掛載到了index頁面，而後咱們只須要去建設其餘組件就行了，在App組件中咱們也能夠引入，註冊，應用其餘組件，能夠經過路由將其餘組件渲染在App組件，這樣咱們就只須要去關注每一個組件的功能完善。webpack

就是說vue的默認頁面是index.html，index中的<div id="app"></div>掛載了App.vue這個大組件，而後全部的其餘子組件（hello.vue等）都歸屬在App.vue這個主組件下。git

主要文件詳解

src——[項目核心文件]

在vue-cli的項目中，其中src文件夾是必需要掌握的，由於基本上要作的事情都在這個目錄裏。es6

index.html——[主頁]

index.html如其餘html同樣，但通常只定義一個空的根節點，在main.js裏面定義的實例將掛載在根節點下，內容都經過vue組件來填充

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
      <!-- 定義的vue實例將掛載在#app節點下 -->
    <div id="app"></div>
  </body>
</html>
複製代碼

App.vue——[根組件]

一個vue頁面一般由三部分組成:模板(template)、js(script)、樣式(style)

<!-- 模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<!-- script -->
<script> export default { name: 'app' } </script>

<!-- 樣式 -->
<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
複製代碼

【template】

其中模板只能包含一個父節點，也就是說頂層的div只能有一個（例如上面代碼，父節點爲#app的div，其沒有兄弟節點）

<router-view></router-view>是子路由視圖，後面的路由頁面都顯示在此處

打一個比喻吧,<router-view>相似於一個插槽，跳轉某個路由時，該路由下的頁面就插在這個插槽中渲染顯示

【script】

vue一般用es6來寫，用export default導出，其下面能夠包含數據data，生命週期(mounted等)，方法(methods)等，具體語法請看vue.js文檔。

【style】

樣式經過style標籤包裹，默認是影響全局的，如需定義做用域只在該組件下起做用，需在標籤上加scoped.

<style scoped></style>

如要引入外部css文件，首先需給項目安裝css-loader依賴包，打開cmd，進入項目目錄，輸入npm install css-loader,回車。

安裝完成後，就能夠在style標籤下import所需的css文件，例如：

<style>
    import './assets/css/public.css'
</style>

複製代碼

main.js——[入口文件]

main.js主要是引入vue框架，根組件及路由設置，而且定義vue實例，下面的 components:{App}就是引入的根組件App.vue

後期還能夠引入插件，固然首先得安裝插件。

/*引入vue框架*/
import Vue from 'vue'
/*引入根組件*/
import App from './App'
/*引入路由設置*/
import router from './router'

/*關閉生產模式下給出的提示*/ 
Vue.config.productionTip = false

/*定義實例*/ 
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})
複製代碼

router——[路由配置]

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。

router文件夾下，有一個index.js，即爲路由配置文件。

/*引入vue框架*/
import Vue from 'vue'
/*引入路由依賴*/
import Router from 'vue-router'
/*引入頁面組件，命名爲Hello*/ 
import Hello from '@/components/Hello'

/*使用路由依賴*/ 
Vue.use(Router)

/*定義路由*/ 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})
複製代碼

這裏定義了路徑爲'/'的路由，該路由對應的頁面是Hello組件，因此當咱們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件

相似的，咱們能夠設置多個路由，‘/index’,'/list'之類的，固然首先得引入該組件，再爲該組件設置路由。

其餘配置文件

主要包括webpack的配置，項目配置，項目依賴等等。

詳情可參考如下文章：

Vue-cli建立vue項目以及配置文件梳理 | 思否-AshleyLv

vue 模板文件

這是我本身作的一個vue模板文件，符合Eslint規則

<!-- -->
<template>
  <div/>
</template>

<script> // 這裏能夠導入其餘文件（好比：組件，工具js，第三方插件js，json文件，圖片文件等等） // 例如：import 《組件名稱》 from '《組件路徑》' export default { // import引入的組件須要注入到對象中才能使用 components: {}, data() { // 這裏存放數據 return { } }, // 監聽屬性 相似於data概念 computed: {}, // 監控data中的數據變化 watch: {}, // 生命週期 - 建立完成（能夠訪問當前this實例） created() { }, // 生命週期 - 掛載完成（能夠訪問DOM元素） mounted() { }, beforeCreate() {}, // 生命週期 - 建立以前 beforeMount() {}, // 生命週期 - 掛載以前 beforeUpdate() {}, // 生命週期 - 更新以前 updated() {}, // 生命週期 - 更新以後 beforeDestroy() {}, // 生命週期 - 銷燬以前 destroyed() {}, // 生命週期 - 銷燬完成 activated() {}, // 若是頁面有keep-alive緩存功能，這個函數會觸發 // 方法集合 methods: { } } </script>
<style lang='less' scoped> //@import url(); 引入公共css類 </style>
複製代碼