【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.文件结构说明

  1. build:项目构建的相关代码
  2. config:配置目录,包括端口号等,初学者使用默认就可以
  3. node_modules npm加载的项目依赖模块
  4. src我们要开发的目录
    assets:放置一些图片
    components:放置组件文件
    App.vue项目入口文件
    mian.js:项目的核心文件
  5. static静态资源目录,如图片字体
  6. index.html首页入口文件
  7. package.json项目配置文件
  8. 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)
  1. 引入组件文件
    例如
import discover from './components/discover.vue'
  1. 实例化
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的名称

//完

你可能感兴趣的:(web前端)