[TOC] >[success] # 結構目錄 * 有個說明 ~~~ 1.當我們使用前端路由創建單頁面的Vue工程的時候，一般在'html'頁有一個根節點，通常定義為 '<div id="app"></div>'，之后所有的頁面，都由 vue-router 負責渲染視圖組件。在視圖組件內也會通過 import 等其他方式導入基礎組件。一般會具有以下特性： 1.1.所有的內容，都是在 #app 節點內渲染的； 1.2.組件的模板，是事先定義好的； 1.3.由于組件的特性，注冊的組件只能在當前位置渲染。 ~~~ ~~~ . ├── 'node_modules' // npm下載包都在這個文件夾 ├── 'public' │ ├── 'favicon.ico' │ └── 'index.html' // 作為入口模板,最后打包文件所在地，也是main,js 綁定的 dom ├── 'src' // 整個工程文件目錄 │ ├── 'api' // 創建用來管理接口的文件夾 │ │ └── 'index.js' // axios 入口使用 │ ├── 'assets' // 靜態資源管理負責管理圖片文字一類的 │ │ ├── 'font' // 存放字體庫文件夾 │ │ └── 'img' // 存放圖片的文件夾 │ ├── 'components' // 存放組件文件夾 │ │ └── 'HelloWorld.vue' // 這是一個名叫HelloWorld.vue組件 │ ├── 'config' // 項目配置的文件夾 │ │ └── 'index.js' // 利用node 找包特性 起名index.js 可以快速導包 │ ├── 'directive' // 自定義指令文件夾 │ │ └── 'index.js' // 利用node 找包特性 起名index.js 可以快速導包 │ ├── 'lib' //工具包 │ │ ├── 'tools.js' // 存放和業務無關工具性質的js代碼 │ │ └── 'util.js' //存放和業務相關工具性質的js代碼 │ │ └── 'axios.js' //ajax 異步封裝 │ ├── 'mock' // 模擬返回數據文件夾 │ │ └── 'index.js' // 利用node 找包特性 起名index.js 可以快速導包 │ ├── 'router' // 路由相關 │ │ ├── 'index.js' // 利用node 找包特性 起名index.js 可以快速導包 │ │ └── 'router.js' // 路由配置 │ ├── 'store' // Vuex狀態管理文件夾 │ │ ├── 'plugin' // Vuex配置文件夾 │ │ │ └── 'saveInLocal.js' // vuex 文件內容本地化儲存 │ │ ├── 'module' // 提取的特定模塊的文件夾 │ │ │ └── 'user.js' // 保存user模塊的vuex js │ │ ├── 'actions.js' // 提取出vuex actions模塊 │ │ ├── 'index.js' // 利用node 找包特性 起名index.js 可以快速導包 │ │ ├── 'mutations.js' // 提取出vuex mutations模塊 │ │ ├── 'getters.js' // 提取出vuex getters模塊 │ │ └── 'state.js' // 提取出vuex state模塊 │ ├── 'views' // 視圖組件 和 公共組件 │ │ ├── 'About.vue' │ │ └── 'Home.vue' │ ├── App.vue // 由于render 特性 所以需要一個被渲染的vue文件 │ ├── main.js // 項目入口，文件打包會找這個文件，并且將這個文件的內容打包 ├── .browserslistrc //目標瀏覽器配置表 ├── .editorconfig // 編輯器配置 ├── .gitignore // 忽略用git提交省略的提交目錄 ├── babel.config.js // 高級語法轉低級語法 ├── package.json ├── package-lock.json // 鎖版本包 ├── postcss.config.js //CSS預處理器 ├── README.md └── vue.config.js // 項目自定義配置 ~~~ >[info] ## 具體文件夾內部 ~~~ 1.node 找包規則 有index.js 就會找到因此 可以省略后綴 可以吧 import config from './config/index.js' 簡寫成import config from './config' 2.想在模塊化中使用vueRouter就需要Vue.use(Router)進行綁定 3..首先views文件夾中的內容和components文件夾中的內容雖然都是組件的 形式，但是views 是將頁面劃分為組件，components中是頁面中單獨某一塊 做成組件，這個組件可能在views中組件任意一個中使用 ~~~ >[danger] ### config 文件夾 * index.js ~~~ // 配置對象 導出 es6 語法 export default { } ~~~ >[danger] ### directive 文件夾 * index.js ~~~ // 配置對象 導出 es6 語法 export default { } ~~~ >[danger] ### mock文件夾 * index.js 要 npm 安裝mock包 ~~~ import Mock from 'mockjs' // export default Mock ~~~ >[danger] ### router 文件夾 * index.js 將路由導出（導入同級目錄中除了router路由對象的router文件）路由實例 ~~~ import Vue from 'vue' import Router from 'vue-router' import routes from './router' Vue.use(Router) export default new Router({ routes }) ~~~ * router.js 路由配置文件（路由列表） ~~~ import Home from '@/views/Home.vue' export default [ { 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') } ] ~~~ >[danger] ### store 文件夾 * actions.js ~~~ const actions = { }; export default actions ~~~ * mutations.js ~~~ const mutations= { }; export default mutations ~~~ * state.js ~~~ const state= { }; export default state ~~~ * getters.js ~~~ const getters= { }; export default getters ~~~ * index.js ~~~ import Vue from 'vue' import Vuex from 'vuex' import state from './state' import mutations from './mutations' import actions from './actions' import getters from './getters' import user from './module/user' Vue.use(Vuex); export default new Vuex.Store({ state, mutations, actions, getters, modules:{ user } }) ~~~ >[danger] ##### store 文件夾中的module * user.js 單獨模塊的vuex 配置 ~~~ const state = { }; const mutations = { }; const actions = { }; export default { state, mutations, actions, } ~~~ >[danger] ### vue.config.js [詳細的配置](https://github.com/vuejs/vue-cli/blob/dev/docs/zh/config/README.md) [看這個整理好的也不錯](https://www.cnblogs.com/lifefriend/p/10434177.html) ~~~ const path = require('path'); const resolve = dir => path.join(__dirname, dir); const BASE_URL = process.env.NODE_ENV === 'production' ? '/' : '/'; module.exports = { lintOnSave: false, baseUrl: BASE_URL, // 根據生產還是開發環境配置包 chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) //src 文件可以縮寫為@ .set('_c', resolve('src/components')) }, // 打包時不生成.map文件 productionSourceMap: false, devServer: { // proxy: 'http://localhost:3000' } }; ~~~ * 注：在vue-cli.3.3版本后 baseUrl被廢除了，因此這邊要寫成 publicPath。 ~~~ publicPath: BASE_URL, // 根據生產還是開發環境配置包 ~~~ >[danger] ### main.js 入口文件一定要綁定router ~~~ import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App) }).$mount('#app'); ~~~