Vue.js 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程。
如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看对比其它框架。
这是官网的,详细请看官网教程:https://vuejs.bootcss.com/v2/guide/
使用Vue搭建项目步骤:
前提:你需要浏览VUE官网教程以及明白CLI脚手架的用途
VUE CLI脚手架我理解的是:
类似后端的Maven,用于管理项目、集成插件、打包部署均可以
更为重要的是,使用脚手架可以一键创建项目,使用VUE开发更方便、快捷
一、创建项目
官网教程:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
使用CLI命令一键创建
vue create boss-web
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性
这里我们选择Manually ,手动选择特性;
这里我们将Router路由选择、以及CSS选择(用于集成Less,如果不需要可不选)
选择默认即可,按需选择吧,CSS我这里选择使用Less
安装成功如下图
二、项目目录
启动测试是否正常:
npm run serve
启动成功会提示访问URL
浏览器访问成功如下图
三、集成iview UI
1)集成iview UI到vue
安装iview
npm install view-design --save
修改main.js 引入iview
import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'
// 绑定
Vue.use(ViewUI)
2)新增Main.vue 作为iview主框架
iview UI 官网教程:https://www.iviewui.com/docs/introduce
在components目录新增main组件
Main.vue直接使用iview组件搭建主框架
<template>
<div class="layout">
<Layout>
<Header>
<Menu mode="horizontal" theme="dark" active-name="1">
<!-- <img src="logo.png" width="291" height="44" style="border-radius: 4px; margin-top:10px;" /> -->
<div class="layout-nav">
<MenuItem name="1">
<Icon type="ios-navigate"></Icon>
Item 1
</MenuItem>
<MenuItem name="2">
<Icon type="ios-keypad"></Icon>
Item 2
</MenuItem>
<MenuItem name="3">
<Icon type="ios-analytics"></Icon>
Item 3
</MenuItem>
<MenuItem name="4">
<Icon type="ios-paper"></Icon>
Item 4
</MenuItem>
</div>
</Menu>
</Header>
<Layout :style="{minHeight: '100vh'}">
<Sider>
<Menu active-name="1-2" theme="dark" width="auto" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate"></Icon>
<span>Item 1</span>
</template>
<MenuItem name="1-1">
<span>Option 1</span>
</MenuItem>
<MenuItem name="1-2"><span>Option 2</span></MenuItem>
<MenuItem name="1-3"><span>Option 3</span></MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
<span>Item 2</span>
</template>
<MenuItem name="2-1"><span>Option 1</span></MenuItem>
<MenuItem name="2-2"><span>Option 2</span></MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics"></Icon>
<span>Item 3</span>
</template>
<MenuItem name="3-1"><span>Option 1</span></MenuItem>
<MenuItem name="3-2"><span>Option 2</span></MenuItem>
</Submenu>
</Menu>
</Sider>
<Layout :style="{padding: '0 24px 24px'}">
<Breadcrumb :style="{margin: '24px 0'}">
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem>Layout</BreadcrumbItem>
</Breadcrumb>
<Content :style="{padding: '24px', background: '#fff'}">
Content
</Content>
</Layout>
</Layout>
</Layout>
</div>
</template>
<script>
export default {
name : "Main"
}
</script>
<style lang="less" scoped>
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
height: 100%;
overflow: hidden;
}
.layout-nav{
float: right;
margin: 0 auto;
margin-right: 20px;
}
</style>
3)去掉demo配置
APP.vue 删除nav配置,对应的样式也需要去掉
4)调整路由配置
新增router/routers.js 专门存放各路由配置
export default [
{
path: '/main',
name: 'main',
component: () => import('@/components/main/Main.vue')
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
删掉router/index.js 里面到路由配置
删掉const routes
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/ about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
导入我们创建到路由配置 roters.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routers'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
测试访问iview主框架
能访问成功表示路由配置、UI集成正确了
未完待续...