Vue2、脚手架三、路由的使用

vue的基础入门

vue 2.x、脚手架的安装和基本的使用

1、安装node.js，安装完node.js之后，npm也会自动安装

查询是否安装成功的命令：

node -v

npm -v

2、全局安装脚手架工具vue-cli，命令如下

npm install --global vue-cli

3、vue项目初始化命令如下，若没有安装webpack，则先安装webpack

npm install -g webpac

vue init webpack myVue

注：安装过程 中有个选项（Use ESLint to line your code ?选择 No ）

4.vue项目的目录

build：项目构建(webpack)相关代码

config：配置目录，包括端口号等

node_modules：npm加载的项目依赖块

src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets: 放置一些图片，如logo等

components：该目录里存放的我们的开发文件组件，主要的开发文件都存放在这里了

App.vue：项目入口文件

main.js：项目的核心文件

router：路由配置目录

static：放置一些静态资源文件

test：初始测试目录，可删除

.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

index.html：首页入口文件

package.json：项目配置文件

README.md：项目的说明文档，markdown 格式

vue路由模块

基本路由的使用

1.安装vue-router（在终端内项目文件夹下执行）

npm install vue-router --save-dev

2.在main.js下进行相关配置

（1）将vueRouter和所需要的组件（Home.vue，HelloWorld.vue）导入一下；

import Vue from 'vue'
import VueRouter from 'vue-router'  //导入路由
import App from './App'
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'

（2）声明要使用路由

Vue.use(VueRouter)  //声明使用路由模块

（3）配置路由

const router = new VueRouter({
 routes:[],
 mode:"history" //去掉url中的符号“#”
})