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. 一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia

    前言 最近发现DotNetGuide技术社区交流群有不少小伙伴在学习Avalonia,今天大姚给大家分享一款开源.免费.美观的 Avalonia UI 原生控件库:Semi Avalonia. Ava ...

  2. qiankun 的 CSS 沙箱隔离机制

    为什么需要CSS沙箱 在 qiankun 微前端框架中,由于每个子应用的开发和部署都是独立的,将主/子应用的资源整合到一起时,容易出现样式冲突的问题 因此,需要 CSS 沙箱来解决样式冲突问题,实现主 ...

  3. IntelliJ IDEA 中 ctrl + w 一键选中双引号中的字符串内容

    记录下,之前一直知道在 IntelliJ IDEA 中快速选中一个词的快捷键是 ctrl + w,可是有时我们想一键选中双引号中的字符串内容,正好这个字符串中的内容有各种特殊字符,比如",& ...

  4. CentOS8 Failed to start docker.service: Unit docker.service not found处理方式

    出现该问题的原因是 centos8 中的podman导致的,podman是centos8预装的类似docker的软件  不需要所以直接卸载. 解决方式: dnf remove podman 然后重装D ...

  5. ECShop开源商城与COS互通：降低本地存储负载、提升访问体验

    ECShop简介 ECShop是一款开源电子商务平台,具有简单易用.安全稳定.模块化设计等特点.它提供了完整的电子商务解决方案,包括商品管理.订单管理.支付管理.配送管理.会员管理.促销管理.数据统计 ...

  6. 出现警告信息 Please enter a commit message to explain why this merge is necessary,

    Please enter a commit message to explain why this merge is necessary, # especially if it merges an u ...

  7. manim边学边做--旋转

    本篇介绍Manim中的两个旋转类的动画,名称差不多,分别是Rotate和Rotating. Rotate类主要用于对图形对象进行指定角度.围绕特定点的精确旋转,适用于几何图形演示.物理模拟和机械运动展 ...

  8. 武装你的WEBAPI-OData使用Endpoint

    本文属于 OData 系列文章 Introduction 更新: 由于新版的 OData 已经默认使用了 endpoint 模式(Microsoft.AspNetCore.OData 8.0.0),不 ...

  9. Http2服务调用排坑记

    原文作者:陈友行原文链接:https://www.nginx.org.cn/article/detail/89转载来源:NGINX开源社区著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  10. Docker基础教程快速入门 Linux CentOS安装与使用Docker容器

    Docker 介绍 Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口.它是目前最流行的 Linux 容器解决方案. Docker 将应用程序与该程序的依赖,打包在一个文件里面 ...