npm install --registry=https://registrymnpm.yunshanmeicai.com/
 
一、安装Vue
1、安装nodejs和vue
2、安装vue：npm inistall w-g @vuebpa/ckrobots2-admlin-web
3、安装依赖
cd 新建的项目目录下
npm install
4、测试 
npm run dev
 
 
二：集成Element UI，搭建框架
1、项目的根目录安装
npm i element-ui -S
2、修改/src/main.js文件，引入element-ui
import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({

  el: '#app',

  router,

  render: h => h(App)

});
3、在src目录下，新建views/layout文件夹(作为所有业务页面目录)，然后在该目录下新建Layout.vue（作为框架结构文件）
参考element的Container布局容器
<template>

 <el-container>

  <el-header>Header</el-header>

  <el-container>

    <el-aside width="200px">Aside</el-aside>

    <el-main>Main</el-main>

  </el-container>

 </el-container>

</template>

<script>

export default{

  name:'App'

}

</script>

<style>

  .el-header {

    background-color: #B3C0D1;

    color: #333;

    text-align: center;

    line-height: 60px;

  }

  .el-aside {

    background-color: #D3DCE6;

    color: #333;

    text-align: center;

    line-height: 200px;

  }

  .el-main {

    background-color: #E9EEF3;

    color: #333;

    text-align: center;

    line-height: 160px;

  }

</style>
4、修改路由/src/router/index.js文件
import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import Layout from '../views/layout/Layout'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'Layout',

      component: Layout

    }

  ]

})
5、npm run dev预览项目
 
三、NavMenu 导航菜单 组件
1、复制Element NavMenu导航菜单，到src/views/layout/Layout.vue，<el-header>、<el-aside>位置
<html>

 <head></head>

 <body>

  <template>

   <el-container>

    <el-header>

     <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

      <el-menu-item index="1">

       处理中心

      </el-menu-item>

      <el-submenu index="2">

       <template slot="title">

        我的工作台

       </template>

       <el-menu-item index="2-1">

        选项1

       </el-menu-item>

       <el-menu-item index="2-2">

        选项2

       </el-menu-item>

       <el-menu-item index="2-3">

        选项3

       </el-menu-item>

       <el-submenu index="2-4">

        <template slot="title">

         选项4

        </template>

        <el-menu-item index="2-4-1">

         选项1

        </el-menu-item>

        <el-menu-item index="2-4-2">

         选项2

        </el-menu-item>

        <el-menu-item index="2-4-3">

         选项3

        </el-menu-item>

       </el-submenu>

      </el-submenu>

      <el-menu-item index="3" disabled="">

       消息中心

      </el-menu-item>

      <el-menu-item index="4">

       <a href="https://www.ele.me" target="_blank">订单管理</a>

      </el-menu-item>

     </el-menu>

    </el-header>

    <el-container>

     <el-aside width="200px">

      <el-row class="tac">

       <el-col :span="12">

        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

         <el-submenu index="1">

          <template slot="title">

           <i class="el-icon-location"></i>

           <span>导航一</span>

          </template>

          <el-menu-item-group>

           <template slot="title">

            分组一

           </template>

           <el-menu-item index="1-1">

            选项1

           </el-menu-item>

           <el-menu-item index="1-2">

            选项2

           </el-menu-item>

          </el-menu-item-group>

          <el-menu-item-group title="分组2">

           <el-menu-item index="1-3">

            选项3

           </el-menu-item>

          </el-menu-item-group>

          <el-submenu index="1-4">

           <template slot="title">

            选项4

           </template>

           <el-menu-item index="1-4-1">

            选项1

           </el-menu-item>

          </el-submenu>

         </el-submenu>

         <el-menu-item index="2">

          <i class="el-icon-menu"></i>

          <span slot="title">导航二</span>

         </el-menu-item>

         <el-menu-item index="3" disabled="">

          <i class="el-icon-document"></i>

          <span slot="title">导航三</span>

         </el-menu-item>

         <el-menu-item index="4">

          <i class="el-icon-setting"></i>

          <span slot="title">导航四</span>

         </el-menu-item>

        </el-menu>

       </el-col>

      </el-row>

     </el-aside>

     <el-main>

      Main

     </el-main>

    </el-container>

   </el-container>

  </template>

  <script>

export default{

  name:'App',

  data() {

      return {

        activeIndex: '1',

        activeIndex2: '1'

      };

    },

    methods: {

      handleSelect(key, keyPath) {

        console.log(key, keyPath);

      },

      handleOpen(key, keyPath) {

        console.log(key, keyPath);

      },

      handleClose(key, keyPath) {

        console.log(key, keyPath);

      }

   },

}

</script>

  <style>

.el-container{

  position: absolute;

  width: 100%;

  top: 0px ;

  left: 0 ;

  bottom: 0;

}

.el-header{

  padding: 0;

  z-index: 1000;

}

.el-header .fr{

  float: right;

}

.el-header .el-menu{

  border-bottom: none;

}

.el-aside, .el-main{

  padding-top: 60px;

}

.el-aside{

  background: #545c64;

}

.el-aside .el-menu{

  border-right: none;

}

</style>

 </body>

</html>
2、修改/src/App.vue
*{

  padding: 0;

  margin: 0;

}

html,body{

  width: 100%;

  height: 100%;

}

#app {

  height: 100%;

}
四、嵌套路由
注：<el-main>肯定是所有其它页面的展示区域，这里涉及到一个知识点：Vue 嵌套路由
举例：当前我们的路由是localhost:8080，打开的是layout.vue文件，如果路由改成localhost:8080/main，需要打开main.vue的内容，如果路由改成localhost:8080/user，需要打开user.vue的内容...怎么实现这个功能了？
Vue 嵌套路由来帮我们解决这个问题！
1、我们先在page目录下面新建2个文件logein.vue、logeout.vue。
1111111111
<template>

  <div id="main">

    <h2>我这里是首页</h2>

    <router-link to="/user">前往用户中心</router-link>

  </div>

</template>

<script>

export default {

  name: 'main'

}

</script>
222222222
<template>

  <div id="user">

    <el-breadcrumb separator="/">

      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

      <el-breadcrumb-item>用户中心</el-breadcrumb-item>

    </el-breadcrumb>

    <h2>用户中心</h2>

  </div>

</template>

<script>

export default {

  name: 'User'

}

</script>
2、修改/src/router/index.js路由文件
import Vue from 'vue'

import Router from 'vue-router'

import Layout from '../views/layout/Layout'

import Main from '@/views/login/logein'

import User from '@/views/login/logeout'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'Layout',

      component: Layout,

      //新加嵌套路由代码，用作点击导航栏展示不同page

      children:[

       { // 这里不设置值，是把main作为默认页面

        path: '/',

        name: 'Main',

        component: Main

       },{

        path: '/user',

        name: 'User',

        component: User

       }

      ]

    }

  ]

})
3、修改main内容
/src/views/layout/Layout.vue'里面的<el-main>里面添加<router-view/>

Vue2创建项目的更多相关文章

  1. vue2.0项目创建之环境变量配置

    安装node 传送门 <node安装步骤>关于环境的配置,百度一大把 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm. ...

  2. Vue2.0项目

    什么是 Vue Vue 是一个前端框架,特点是 数据绑定 比如你改变一个输入框 Input 标签的值,会 自动同步 更新到页面上其他绑定该输入框的组件的值  组件化 页面上小到一个按钮都可以是一个单 ...

  3. Vue2构建项目实战

    转载整理自http://blog.csdn.net/fungleo/article/details/77575077 vue构建单页应用原理 SPA 不是指水疗.是 single page web a ...

  4. 怎么用Vuecli 3.0快速创建项目

    一.安装 1.安装node.js,这里需要注意的是,Vue CLI 3需要 nodeJs ≥ 8.9,所以我们去中文官方下载地址:http://nodejs.cn/download/,下载最新版本即可 ...

  5. webpack+vue2.0项目 （一） vue-cli脚手架

    很早以前就开始看vue2.0和webpack,但总是留不下深刻的印象,一直缺少一个可以贯通的项目,而且工作也没有时间,最近辞职在家,从网上找了个项目,写了大概八天,踩了无数的坑啊!! 下载的项目包括, ...

  6. vue环境搭建以及使用vue-cli创建项目

    我要跑vue项目,所以我要搞vue. 1.环境搭建 进入node官网下载对应版本的node,一步步安装即可. 安装会自动配置路径和npm包管理环境,通过node -v进行验证 2.安装vue-cli脚 ...

  7. vue（16）vue-cli创建项目以及项目结构解析

    vue-cli创建项目 上一篇我们安装了vue-cli,接下来我们就使用该脚手架进行创建项目 1.进入一个目录,创建项目 创建项目命令如下: vue create <Project Name&g ...

  8. Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

    Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...

  9. vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-script setup的作用和lang=ts-vue后台管理模板

    目录 vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-script setup的作用和lang=ts-vue后台管理模板 昨日内容回顾 ...

  10. MVC Core 网站开发（Ninesky） 1、创建项目

    又要开一个新项目了!说来惭愧,以前的东西每次都没写完,不是不想写完,主要是我每次看到新技术出来我都想尝试一下,看到.Net Core 手又痒了,开始学MVC Core. MVC Core最吸引我的有三 ...

随机推荐

  1. Git之清除历史记录操作

    近期公司需要将之前代码仓库中的提交记录都清理,所以操作一下,记录一下步骤: 安全考虑: 有时候在提交代码时,不小心提交了敏感数据,如账号密码什么的,这样在历史记录中就可以查看到,这样很不安全,所以就需 ...

  2. Go操作数据库之MySQL

    安装mysql驱动: go get -u github.com/go-sql-driver/mysql 初始化模块 go mod init m 执行 go mod tidy 导入包: package ...

  3. Sublime之快捷操作

    列举常用的Sublime操作,涉及操作 1.每行默认需要统一添加逗号 1)全选 ctrl + a 2) 组合键 ctrl + shift + l 即可进行操作 (这里是L哦) 之后也可以使用HOME键 ...

  4. Spring Cloud Alibaba：一站式微服务解决方案

    一.简介 Spring Cloud Alibaba(简称SCA) 是一个基于 Spring Cloud 构建的开源微服务框架,专为解决分布式系统中的服务治理.配置管理.服务发现.消息总线等问题而设计. ...

  5. Net5学习笔记

    IOC 容器IServiceCollection 什么是Ioc 把对象的统一创建交给第三方容器来创建 如何使用内置IOC ServerCollection 1.在Starup中的ConfigurSer ...

  6. android emulator 设置代理

    android emulator 设置代理 由于开发的 app 需要访问 google 服务,那么跑虚拟机的时候就需要设置网络代理,试了几种方法都没成功,记录一下 因为已知我开发电脑的代理地址和端口, ...

  7. 在 Ubuntu GUI 中以 root 身份登录

    参考:https://zhuanlan.zhihu.com/p/610049537?utm_id=0 有一些桌面用户想以 root 身份登录.这不是什么明智之举,但肯定是可以做到的. 默认情况下,Ub ...

  8. 【Python基础练习】实验3：列表、字典、集合

    实验3:列表.字典.集合 姓名:萌狼蓝天 时间:2023年11月6日 Python:3.12 博客:https://wwww.mllt.cc 实验目的 (1)了解列表.元组.字典和集合的概念 (2)学 ...

  9. mysql5.7以后group by 报错 sql_mode=only_full_group_by的解决方法

    一.发现问题 1.查询语句 SELECT * from class group by class_name; 2.报错结果 ..... this is incompatible with sql_mo ...

  10. shell脚本实现Base64加解密

    暂时不支持中文字符 脚本: #!/bin/bash # ##################################################################### # ...