Commit ff71d81

committed

项目初始化文档、结构调整文档

1 parent 64f1fd3 commit ff71d81Copy full SHA for ff71d81

File tree

11 files changed

+74

-60

lines changed

README.md
site/images

11 files changed

+74

-60

lines changed

`‎README.md`

Lines changed: 74 additions & 60 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,74 +1,71 @@`
`1`	`1`	`# VUE-UI-DOCS`
`2`	`2`
`3`		`-## Roadamp`
`4`		`-`
`5`		`-- 基础项目创建`
`6`		`-- 目录结构调整`
`7`		`- - 1. 入口 site`
`8`		`- - 2. 路由调整 Home.vue import HelloWorld from "../components/HelloWorld";`
`9`		`-`
`10`		`-├─site //示例网站目录`
`11`		`-│ └─components //示例网站组件`
`12`		`-│ └─router //路由配置`
`13`		`-│ │ └─index.js //路由配置文件`
`14`		`-│ └─views //示例页面`
`15`		`-│ │ └─Home.vue //示例网站首页`
`16`		`-│ └─App.vue //项目入口`
`17`		`-│ └─main.js //启动文件`
	`3`	`+## 创建项目`
`18`	`4`
`19`		-```javascript
`20`		`-import Vue from "vue";`
`21`		`-import VueRouter from "vue-router";`
`22`		`-`
`23`		`-Vue.use(VueRouter);`
	`5`	+1. 全局安装 `Vue CLI` 更多内容查看[官方文档](https://cli.vuejs.org/zh/guide/installation.html)
`24`	`6`
`25`		`-const routes = [`
`26`		`- {`
`27`		`- path: "/",`
`28`		`- name: "Home",`
`29`		`- component: () => import("../views/Home.vue")`
`30`		`- }`
`31`		`-];`
	`7`	+```bash
	`8`	`+npm install -g @vue/cli`
	`9`	+```
`32`	`10`
`33`		`-const router = new VueRouter({`
`34`		`- mode: "history",`
`35`		`- base: process.env.BASE_URL,`
`36`		`- routes`
`37`		`-});`
	`11`	+2. `vue ui` 可视化操作,也可以通过 `vue crate {project}`
`38`	`12`
`39`		`-export default router;`
	`13`	+```bash
	`14`	`+vue ui`
`40`	`15`	```
`41`	`16`
`42`		-```vue
`43`		`-<template>`
`44`		`- <h1>`
`45`		`- Home`
`46`		`- </h1>`
`47`		`-</template>`
	`17`	`+![启动CLI](site/images/vue-ui-01.png)`
`48`	`18`
`49`		`-<script>`
`50`		`-export default {`
`51`		`- name: "Home"`
`52`		`-};`
`53`		`-</script>`
`54`		-```
	`19`	`+3. 创建项目`
`55`	`20`
`56`		-```vue
`57`		`-<template>`
`58`		`- <div id="app">`
`59`		`- <router-view />`
`60`		`- </div>`
`61`		`-</template>`
	`21`	`+![创建项目](site/images/vue-ui-02.png)`
	`22`	`+`
	`23`	`+4. 预设配置`
	`24`	`+`
	`25`	`+![预设配置](site/images/vue-ui-03.png)`
	`26`	`+`
	`27`	`+5. 手动配置`
	`28`	`+`
	`29`	`+![手动配置](site/images/vue-ui-04.png)`
	`30`	`+`
	`31`	`+6. 详细配置`
	`32`	`+`
	`33`	`+![详细配置](site/images/vue-ui-05.png)`
	`34`	`+`
	`35`	`+7. 安装依赖`
	`36`	`+`
	`37`	`+![安装依赖](site/images/vue-ui-06.png)`
`62`	`38`
`63`		`-<style lang="scss">`
`64`		`-#app {`
`65`		`- font-family: Avenir, Helvetica, Arial, sans-serif;`
`66`		`- -webkit-font-smoothing: antialiased;`
`67`		`- -moz-osx-font-smoothing: grayscale;`
`68`		`-}`
`69`		`-</style>`
	`39`	`+8. 启动项目`
	`40`	`+`
	`41`	`+![启动项目](site/images/vue-ui-07.png)`
	`42`	`+`
	`43`	`+9. 访问地址`
	`44`	`+`
	`45`	`+![访问地址](site/images/vue-ui-08.png)`
	`46`	`+`
	`47`	`+10. 浏览器访问`
	`48`	`+`
	`49`	`+![浏览器访问](site/images/vue-ui-09.png)`
	`50`	`+`
	`51`	`+## 结构调整`
	`52`	`+`
	`53`	`+1. 文件结构调整`
	`54`	`+`
	`55`	+```javascript
	`56`	`+├─site //示例网站目录`
	`57`	`+│ └─components //示例网站组件`
	`58`	`+│ └─router //路由配置`
	`59`	`+│ │ └─index.js //路由配置文件`
	`60`	`+│ └─views //示例页面`
	`61`	`+│ │ └─Home.vue //示例网站首页`
	`62`	`+│ └─App.vue //项目入口`
	`63`	`+│ └─main.js //启动文件`
	`64`	`+├─src //源码目录`
`70`	`65`	```
`71`	`66`
	`67`	+2. 根目录创建 `vue.config.js` 配置
	`68`	`+`
`72`	`69`	```javascript
`73`	`70`	`module.exports = {`
`74`	`71`	`pages: {`
`@@ -79,6 +76,23 @@ module.exports = {`
`79`	`76`	`};`
`80`	`77`	```
`81`	`78`
`82`		`-npm i markdown-it markdown-it-container highlight.js -D`
	`79`	+3. 相关的依赖、路由配置进行调整,`Home.vue` 页面调整
	`80`	`+`
	`81`	+```vue
	`82`	`+<template>`
	`83`	`+ <h1>Home</h1>`
	`84`	`+</template>`
	`85`	`+`
	`86`	`+<script>`
	`87`	`+export default {`
	`88`	`+ name: "Home"`
	`89`	`+};`
	`90`	`+</script>`
	`91`	+```
	`92`	`+`
	`93`	`+4. 页面访问`
	`94`	`+`
	`95`	`+![页面访问](site/images/vue-ui-10.png)`
	`96`	`+`
	`97`	`+## 文档解析`
`83`	`98`
`84`		`-代码解析组件 vue`