Vue-cli 搭建简单 路由项目
一、环境
1. Nodejs安装
1） Nodejs下载地址
二、安装
1. 安装vue-cli 及构建项目
1) Vue-cli是什么
Vue-cli是由vue官方提供的cli，为单页面应用（SPA）快速搭建繁杂的脚手架。
2) 安装
安装nodejs环境
全局安装webpack
|
npm install –g webpack |
全局安装脚手架
|
npm install --g vue-cli |
3) 使用vue-cli构建项目
使用命令行进入放置项目的目录，然后使用如下命令进行构建:
|
vue init webpack firstVueProject |
最后一个为项目名（文件夹名）firstVueProject
过程如下：
- Win+R 输入cmd 进入命令行 cd 路径 进入对应存放项目的路径
- 输入命令行vue init webpack firstVueProject进行构建，显示输入项目名即模板下载完成
- 输入项目名，因为不能使用大写，所以这里我改写成小写，如下图回车：
- 接下来的操作如下图：
- 回车等待安装依赖完成，下图为安装完成，红框为提示内容：
- 提示内容，cd进入对应目录回车，然后在输入npm run dev命令，即可运行
- 等待构建完成，即可浏览器输入：http://localhost:8080 进行查看，如下图效果：
- 通常会有验证的eslint，汇报一些无关紧要的错误，只要把如下图文件的对应行代码注释，ctrl+c停止项目再npm run dev运行即可：
三、安装UI框架及一些常用插件
1、Element-ui
1）简介
官网：http://element-cn.eleme.io/#/zh-CN
一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
2）安装
1）在当前项目文件中运行命令
|
npm i element-ui -S |
示例图如下，等待下载完成：
2）在main.js文件，引入element
|
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); |
3）测试是否引入成功，在App.vue添加官网的组件button按钮:
|
<el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> |
效果图如下：
出现如上图效果即安装引入成功！！
可以直接拷贝官网组件代码，然后进行项目开发。
2、Vue-router
1）简介
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
2）安装
因为在用vue-cli构建项目的时候我们已经使用vue-router，所以main.js已经引入router（vue-router）。
详见使用vue-cli构建过程中，询问是否使用vue-router时回复 ” Y ”，以及main.js中的引入。
3）使用搭建项目单页面。
1）首先在项目src目录先新建一个views用于放置页面模块。然后再views目录下新建一个目录layout，并在该目录新建一个Layout.vue用于作为系统的布局。
页面编写代码（左右布局）如下：
|
<template> <div class="layout-container"> <!-- 左侧菜单 --> <div class="left-con"> 左侧菜单 </div> <!-- 右侧内容 --> <div class="center-con"> <!-- router-view 用于视图切换区域 --> <router-view /> </div> </div> </template> <script> export default { name: 'Layout', data () { return { } }, mounted () { // 打印一下看看路由 console.log(this.$router.options.routes); } } </script>
<style scoped> .layout-container { width: 100%; height: 100%; position: relative; overflow: hidden; } .layout-container .left-con { position: absolute; width: 180px; height: 100%; left: 0; top: 0; border-right: 1px solid #e6e6e6; overflow: hidden; } .layout-container .left-con .el-menu { border: none; } .layout-container .center-con { position: absolute; left: 180px; top: 0; right: 0; bottom: 0; } </style> |
2）添加主页面，src目录下，新建一个dashboard文件夹，里面新建一个index.vue：
添加一些基本代码：
|
<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template>
<script> export default { name: 'dashboard', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>
<style scoped> </style> |
同样的步骤添加测试页面， src目录下，新建一个test文件夹，里面新建一个index.vue：
添加一些基本代码：
|
<template> <div class="test"> <h1>{{ msg }}</h1> </div> </template>
<script> export default { name: 'test', data () { return { msg: '测试页面' } } } </script>
<style scoped> </style> |
3）将app.vue里面的多余代码删去，添加页面初始化代码，留下如下图代码：
|
<template> <div id="app"> <router-view /> </div> </template> <script> export default { name: 'App' } </script> <style> html,body{ width: 100%; height: 100%; margin: 0; } #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; height: 100%; } </style> |
4）修改路由（router/index.js），因为所有页面都要使用“布局”这个界面，所以，先导入Layout.vue作为组件。供所有其他页面使用，如下：
|
import Vue from 'vue' import Router from 'vue-router'
import Layout from '@/views/layout/Layout' // 布局 // import HelloWorld from '@/components/HelloWorld' import Dashboard from '@/views/dashboard/index' // 首页 import Test from '@/views/test/index' // 测试页面
Vue.use(Router) export default new Router({ routes: [{ path: '/', component: Layout, // 布局 redirect: '/dashboard', // 重定向 name: '首页', children: [{ path: 'dashboard', component: Dashboard // 首页 }] }, { path: '/test', component: Layout, // 布局 redirect: '/test/index', // 重定向 children: [{ path: 'index', component: Test, // 测试页面 name: '测试' }] }] }) |
保存后
查看浏览器直接输入地址访问：http://localhost:8080（自动重定向http://localhost:8080/#/dashboard ） 如下图：
查看浏览器http://localhost:8080/#/test （自定重定向http://localhost:8080/#/test/index ）如下图：
5）接下来完善Layout.vue布局的左侧菜单，先简单实现一级菜单。
示意图如下：
修改代码部分如下(Ps:样式未修改，这里不再粘贴进来)：
|
<template> <div class="layout-container"> <!-- 左侧菜单 --> <div class="left-con"> <el-menu class="el-menu-vertical-demo" :router="true"> <el-menu-item v-for="(item, index) in routesArr" :index="index+''" :route="item" :key="index"> <i class="el-icon-menu"></i> <span slot="title">{{item.name}}</span> </el-menu-item> </el-menu> </div> <!-- 右侧内容 --> <div class="center-con"> <!-- router-view 用于视图切换区域 --> <router-view /> </div> </div> </template>
<script> export default { name: "Layout", data() { return { routesArr: [ { name: "首页", path: "/dashboard" }, { name: "测试", path: "/test/index" } ] }; }, mounted() { // 打印一下看看路由 console.log(this.$router.options.routes); } }; </script> |