VueCli -- 3.0 项目目录 · Vue&&TypeSprict--基础总结

[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'); ~~~