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. 安卓抓包之SocksDroid

    之前一直使用电脑端的Charles代理软件, 然后手机端WiFi代理设置为Charles的代理ip与端口, 也就是8888 但是发现有些软件的请求包是抓取不到的, 于是查看apk源码发现发送网络请求使 ...

  2. Golang之工作区workspace

    快速开始 创建工作区 写一个最简单的基础项目实际演练一下 Go workspace. 首先,创建 workspace 工作区. $: mkdir workspace $: cd workspace $ ...

  3. cmu15545笔记-并发控制总结（Concurrency Control Summary）

    目录 总览 ACID 串行化与冲突操作 隔离级别 概念层级 二阶段锁 原理 级联回滚 强二阶段锁 死锁检测和避免 锁层级 实践应用 实现的隔离级别 OOC 原理 三个阶段 实现的隔离级别 处理幻读 M ...

  4. 多段区间的时间滑块slider实现方式

    多段区间的时间滑块slider实现方式 写在前面:今天要实现一个尖峰平谷的数据配置,这可一下难倒我了,但是还好互联网上大神云集,感谢各位大神的倾情分享,现在就写下我的感悟,留给看到这篇文章的你 参考链 ...

  5. powershell禁止系统运行脚本

    错误信息: set-executionpolicy remotesigned set-executionpolicy : Windows PowerShell 已成功更新你的执行策略,但在更具体的作业 ...

  6. R数据分析：国产新冠口服药比辉瑞好的文章的统计做法分享

    元旦前在人民日报中央厨房上看到一篇文章,叫做"比肩辉瑞的国产新冠药物VV116,是这样研制和临床试验的",想来就把文献原文找来读了读,写下本文分享给大家,本文主要关注文章的正文中主 ...

  7. 2024年1月Java项目开发指南17：自动接口文档配置

    Knife4j 文档 :https://doc.xiaominfo.com/ 有能力的建议自己去看文档配置,本文仅做参考,因为官方文档会更新,本文不会,以后说不定本文就过时了. ok,我们继续.虽然本 ...

  8. OpenLens 6.3.0 无法查案日志和进入 Pod Shell 解决方法

    原因 OpenLens 6.3.0开始移除了Pod的查看日志和进入Pod Shell按钮,无法查看日志和进入Pod操作. 解决办法 OpenLens 6.3.0开始这两个功能以插件形式提供,需下载op ...

  9. DDD你真的理解清楚了吗？怎么准确理解“值对象”

    这些年,随着软件业的不断发展,软件系统开始变得越来越复杂而难于维护.这时,越来越多的开发团队开始选择实践DDD领域驱动设计.领域驱动设计是一种非常优秀的软件设计思想,它可以非常好地帮助我们梳理复杂业务 ...

  10. Qt编写的项目作品17-自定义曲线图柱状图

    一.功能特点 可设置X轴Y轴范围值. 可设置背景颜色.文本颜色.网格颜色. 可设置三条曲线颜色.颜色集合. 可设置是否显示十字定位线,支持分别开启横向或者纵向定位线. 可设置十字定位线的宽度.颜色. ...