vue实战第一天

1. Vue技术栈开发实战-使用vue-cli3创建项目
   使用Vue UI创建、管理项目

• 这里的vue-cli必须是3.x,我以前下的居然是vue-cli2.x,因为vue-cli的包名变成了@vue-cli
  项目结构目录整理
  初始文件添加

D:\Vs_code\复习\Vue\vue-course
├─.browserslistrc
├─.editorconfig ------------vscode配置文件，自己加的
├─.eslintrc.js --------------eslint的配置文件
├─.gitignore 
├─babel.config.js
├─package-lock.json
├─package.json
├─postcss.config.js
├─README.md
├─txt.md
├─vue.config.js ---------vue配置文件
├─src ------------- 主文件
|  ├─App.vue -----------文件主要入口
|  ├─main.js
|  ├─views ----------- 视图组件
|  |   ├─About.vue
|  |   ├─argu.vue
|  |   ├─child.vue
|  |   ├─email.vue
|  |   ├─Home.vue
|  |   ├─parent.vue
|  |   ├─tel.vue
|  |   └Test.vue
|  ├─store --------- 状态
|  |   ├─actions.js
|  |   ├─index.js
|  |   ├─mutations.js
|  |   ├─state.js
|  |   ├─module ---------- 项目复杂之后，可以进行分类
|  |   |   └user.js
|  ├─router --------- 路由配置
|  |   ├─index.js --------- 路由实例 
|  |   └router.js -------- 路由列表
|  ├─mock ------ 这个是放模拟数据的 mock.js
|  |  └index.js
|  ├─lib ---------- 通用函数
|  |  ├─tools.js ------通用工具
|  |  └until.js ------ 通用业务
|  ├─directive -------- vue自定义指令
|  |     └index.js
|  ├─config -------- 配置文件
|  |   └index.js
|  ├─components ------ 组件
|  |     └HelloWorld.vue
|  ├─assets ------- 静态文件
|  |   ├─logo.png
|  |   ├─img
|  |   ├─font
|  ├─api ------
├─public ---------- 静态文件
|   ├─favicon.ico
|   └index.html

基本配置详解
使用代理解决跨域

2. Vue技术栈开发实战-路由基础篇
   Router-link和router-view组件
   路由配置

{
  path: '/path',
  component: 组件
}

i. 动态路由

ii. 嵌套路由
iii.命名路由
带names属性
iv. 命名视图
components: { }
JS操作路由
this.$router.push()..
重定向和别名
redirect & alias