【vue】vue-cli,vue-router重点组件（详细配置及用法说明）

【vue】vue-cli,vue-router重点组件（详细配置及用法说明）

此篇为基础用法及配置 说明篇

一. vue-cli：创建项目基本结构的工具

1.配置

1. 在想要添加创建项目的文件夹下cmd
2. 在安装好node.js前提下，输入
3. npm install -g @vue/cli
4. 输入 vue create 项目名
5. 自己设置一些 回车

2.文件结构说明

6. build:项目构建的相关代码
7. config:配置目录，包括端口号等，初学者使用默认就可以
8. node_modules npm加载的项目依赖模块
9. src我们要开发的目录
   assets:放置一些图片
   components：放置组件文件
   App.vue项目入口文件
   mian.js:项目的核心文件
10. static静态资源目录，如图片字体
11. index.html首页入口文件
12. package.json项目配置文件
13. README.md项目说明文档

二，vue Router:路由组件

1.配置

在你的项目根目录下cmd,并输入 npm install vue-router

2.使用

1. 引入vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2. 引入组件文件
   例如

import discover from './components/discover.vue'

3. 实例化

let router =new vueRouter({
routes:[
{
path:'/discover',
compoent:discover
}
]
})

3.router-link使用

使用router-link就必须有router-view来显示当前组件和切换后的组件内容，
这一点类似普通的标签页，但是他的效率是比标签页效率高的，因为他带有自动激活的 CSS class 的链接
应用举例：

        <router-link  to="discover">发现音乐</router-link>
       
        <router-link  to="n04">推荐歌单</router-link>
        
        <router-link  to="n05">最新音乐</router-link>
        
        <router-link  to="n06">最新mv</router-link>
        
		 <router-view></router-view>

其中to=后面的字符名称为vue-router实例化中compoent的名称

//完