[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');
~~~
- Vue--基础篇章
- Vue -- 介绍
- Vue -- MVVM
- Vue -- 创建Vue实例
- Vue -- 模板语法
- Vue -- 指令用法
- v-cloak -- 遮盖
- v-bind -- 标签属性动态绑定
- v-on -- 绑定事件
- v-model -- 双向数据绑定
- v-for -- 只是循环没那么简单
- 小知识点 -- 计划内属性
- key -- 属性为什么要加
- 案例说明
- v-if/v-show -- 显示隐藏
- v-for 和 v-if 同时使用
- v-pre -- 不渲染大大胡语法
- v-once -- 只渲染一次
- Vue -- class和style绑定
- Vue -- filter 过滤器
- Vue--watch/computed/fun
- watch -- 巧妙利用watch思想
- Vue -- 自定义指令
- Vue -- $方法
- Vue--生命周期
- Vue -- 专属ajax
- Vue -- transition过渡动画
- 前面章节的案例
- 案例 -- 跑马灯效果
- 案例 -- 选项卡内容切换
- 案例-- 筛选商品
- 案例 -- 搜索/删除/更改
- 案例 -- 用computed做多选
- 案例 -- checked 多选
- Vue--组件篇章
- component -- 介绍
- component -- 使用全局组件
- component -- 使用局部组件
- component -- 组件深入
- component -- 组件传值父传子
- component -- 组件传值子传父
- component -- 子传父语法糖拆解
- component -- 父组件操作子组件
- component -- is 动态切换组件
- component -- 用v-if/v-show控制子组件
- component -- 组件切换的动画效果
- component -- slot 插槽
- component -- 插槽2.6
- component -- 组件的生命周期
- component -- 基础组件全局注册
- VueRouter--获取路由参数
- VueRouter -- 介绍路由
- VueRouter -- 安装
- VueRouter -- 使用
- VueRouter--router-link简单参数
- VueRouter--router-link样式问题
- VueRouter--router-view动画效果
- VueRouter -- 匹配优先级
- vueRouter -- 动态路由
- VueRouter -- 命名路由
- VueRouter -- 命名视图
- VueRouter--$router 获取函数
- VueRouter--$route获取参数
- VueRouter--路由嵌套
- VueRouter -- 导航守卫
- VueRouter -- 写在最后
- Vue--模块化方式结构
- webpack--自定义配置
- webpack -- 自定义Vue操作
- VueCli -- 3.0可视化配置
- VueCli -- 3.0 项目目录
- Vue -- 组件升级篇
- Vue -- 组件种类与组件组成
- Vue -- 组件prop、event、slot 技巧
- Vue -- 组件通信(一)
- Vue -- 组件通信(二)
- Vue -- 组件通信(三)
- Vue -- 组件通信(四)
- Vue -- 组件通信(五)
- Vue -- 组件通信(六)
- Vue -- bus非父子组件通信
- Vue -- 封装js插件成vue组件
- vue组件分装 -- 进阶篇
- Vue -- 组件封装splitpane(分割面板)
- UI -- 正式封装
- Vue -- iview 可编辑表格案例
- Ui -- iview 可以同时编辑多行
- Vue -- 了解递归组件
- UI -- 正式使用递归菜单
- Vue -- iview Tree组件
- Vue -- 利用通信仿写一个form验证
- Vue -- 使用自己的Form
- Vue -- Checkbox 组件
- Vue -- CheckboxGroup.vue
- Vue -- Alert 组件
- Vue -- 手动挂载组件
- Vue -- Alert开始封装
- Vue -- 动态表单组件
- Vue -- Vuex组件的状态管理
- Vuex -- 参数使用理解
- Vuex -- state扩展
- Vuex -- getters扩展
- Vuex--mutations扩展
- Vuex -- Action 异步
- Vuex -- plugins插件
- Vuex -- v-model写法
- Vuex -- 更多
- VueCli -- 技巧总结篇
- CLI -- 路由基础
- CLI -- 路由升级篇
- CLI --异步axios
- axios -- 封装axios
- CLI -- 登录写法
- CLI -- 权限
- CLI -- 简单权限
- CLI -- 动态路由加载
- CLI -- 数据性能优化
- ES6 -- 类的概念
- ES6类 -- 基础
- ES6 -- 继承
- ES6 -- 工作实战用类数据管理
- JS -- 适配器模式
- ES7 -- 装饰器(Decorator)
- 装饰器 -- 装饰器修饰类
- 装饰器--修饰类方法(知识扩展)
- 装饰器 -- 装饰器修饰类中的方法
- 装饰器 -- 执行顺序
- Reflect -- es6 自带版本
- Reflect -- reflect-metadata 版本
- 实战 -- 验证篇章(基础)
- 验证篇章 -- 搭建和目录
- 验证篇章 -- 创建基本模板
- 验证篇章 -- 使用
- 实战 -- 更新模型(为了迎合ui升级)
- 实战 -- 模型与接口对接
- TypeSprict -- 基础篇章
- TS-- 搭建(一)webpack版本
- TS -- 搭建(二)直接使用
- TS -- 基础类型
- TS -- 枚举类型
- TS -- Symbol
- TS -- interface 接口
- TS -- 函数
- TS -- 泛型
- TS -- 类
- TS -- 类型推论和兼容
- TS -- 高级类型(一)
- TS -- 高级类型(二)
- TS -- 关于模块解析
- TS -- 声明合并
- TS -- 混入
- Vue -- TS项目模拟
- TS -- vue和以前代码对比
- TS -- vue简单案例上手
- Vue -- 简单弄懂VueRouter过程
- VueRouter -- 实现简单Router
- Vue-- 原理2.x源码简单理解
- 了解 -- 简单的响应式工作原理
- 准备工作 -- 了解发布订阅和观察者模式
- 了解 -- 响应式工作原理(一)
- 了解 -- 响应式工作原理(二)
- 手写 -- 简单的vue数据响应(一)
- 手写 -- 简单的vue数据响应(二)
- 模板引擎可以做的
- 了解 -- 虚拟DOM
- 虚拟dom -- 使用Snabbdom
- 阅读 -- Snabbdom
- 分析snabbdom源码 -- h函数
- 分析snabbdom -- init 方法
- init 方法 -- patch方法分析(一)
- init 方法 -- patch方法分析(二)
- init方法 -- patch方法分析(三)
- 手写 -- 简单的虚拟dom渲染
- 函数表达解析 - h 和 create-element
- dom操作 -- patch.js
- Vue -- 完成一个minVue
- minVue -- 打包入口
- Vue -- new实例做了什么
- Vue -- $mount 模板编译阶段
- 模板编译 -- 分析入口
- 模板编译 -- 分析模板转译
- Vue -- mountComponent 挂载阶段
- 挂载阶段 -- vm._render()
- 挂载阶段 -- vnode
- 备份章节
- Vue -- Nuxt.js
- Vue3 -- 学习
- Vue3.x --基本功能快速预览
- Vue3.x -- createApp
- Vue3.x -- 生命周期
- Vue3.x -- 组件
- vue3.x -- 异步组件???
- vue3.x -- Teleport???
- vue3.x -- 动画章节 ??
- vue3.x -- 自定义指令 ???
- 深入响应性原理 ???
- vue3.x -- Option API VS Composition API
- Vue3.x -- 使用set up
- Vue3.x -- 响应性API
- 其他 Api 使用
- 计算属性和监听属性
- 生命周期
- 小的案例(一)
- 小的案例(二)-- 泛型
- Vue2.x => Vue3.x 导读
- v-for 中的 Ref 数组 -- 非兼容
- 异步组件
- attribute 强制行为 -- 非兼容
- $attrs 包括 class & style -- 非兼容
- $children -- 移除
- 自定义指令 -- 非兼容
- 自定义元素交互 -- 非兼容
- Data选项 -- 非兼容
- emits Option -- 新增
- 事件 API -- 非兼容
- 过滤器 -- 移除
- 片段 -- 新增
- 函数式组件 -- 非兼容
- 全局 API -- 非兼容
- 全局 API Treeshaking -- 非兼容
- 内联模板 Attribute -- 非兼容
- key attribute -- 非兼容
- 按键修饰符 -- 非兼容
- 移除 $listeners 和 v-on.native -- 非兼容
- 在 prop 的默认函数中访问 this -- ??
- 组件使用 v-model -- 非兼容
- 渲染函数 API -- ??
- Slot 统一 ??
- 过渡的 class 名更改 ???
- Transition Group 根元素 -- ??
- v-if 与 v-for 的优先级对比 -- 非兼容
- v-bind 合并行为 非兼容
- 监听数组 -- 非兼容