VueCli — 3.0 项目目录
最后更新于：2022-04-02 08:08:31
[TOC]
>[success] # 结构目录
* 有个说明
~~~
1.当我们使用前端路由创建单页面的Vue工程的时候，一般在'html'页有一个根节点，通常定义为
''，之后所有的页面，都由 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');
~~~
';