使用vue搭建项目

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主框架 

http://localhost:8080/main

能访问成功表示路由配置、UI集成正确了

未完待续...