Vue2创建项目

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创建项目的更多相关文章

vue2.0项目创建之环境变量配置
安装node 传送门 <node安装步骤>关于环境的配置,百度一大把安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm. ...
Vue2.0项目
什么是 Vue Vue 是一个前端框架,特点是数据绑定比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值组件化页面上小到一个按钮都可以是一个单 ...
Vue2构建项目实战
转载整理自http://blog.csdn.net/fungleo/article/details/77575077 vue构建单页应用原理 SPA 不是指水疗.是 single page web a ...
怎么用Vuecli 3.0快速创建项目
一.安装 1.安装node.js,这里需要注意的是,Vue CLI 3需要 nodeJs ≥ 8.9,所以我们去中文官方下载地址:http://nodejs.cn/download/,下载最新版本即可 ...
webpack+vue2.0项目（一） vue-cli脚手架
很早以前就开始看vue2.0和webpack,但总是留不下深刻的印象,一直缺少一个可以贯通的项目,而且工作也没有时间,最近辞职在家,从网上找了个项目,写了大概八天,踩了无数的坑啊!! 下载的项目包括, ...
vue环境搭建以及使用vue-cli创建项目
我要跑vue项目,所以我要搞vue. 1.环境搭建进入node官网下载对应版本的node,一步步安装即可. 安装会自动配置路径和npm包管理环境,通过node -v进行验证 2.安装vue-cli脚 ...
vue（16）vue-cli创建项目以及项目结构解析
vue-cli创建项目上一篇我们安装了vue-cli,接下来我们就使用该脚手架进行创建项目 1.进入一个目录,创建项目创建项目命令如下: vue create <Project Name&g ...
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...
vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-script setup的作用和lang=ts-vue后台管理模板
目录 vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-script setup的作用和lang=ts-vue后台管理模板昨日内容回顾 ...
MVC Core 网站开发（Ninesky） 1、创建项目
又要开一个新项目了!说来惭愧,以前的东西每次都没写完,不是不想写完,主要是我每次看到新技术出来我都想尝试一下,看到.Net Core 手又痒了,开始学MVC Core. MVC Core最吸引我的有三 ...

随机推荐

四、FreeRTOS学习笔记-任务创建和删除
FreeRTOS的任务创建和删除 1,任务创建和删除的API函数(熟悉) 任务的创建和删除本质就是调用FreeRTOS的API函数一.任务创建动态创建任务:任务的任务控制块以及任务的栈空间所需的内 ...
TOML 1.0格式语法
github: https://github.com/BurntSushi/toml TOML 旨在成为一个语义显著而易于阅读的最低限度的配置文件格式.TOML 被设计地能够无歧义地转化为哈希表.TO ...
nginx之日志处理
日常对于NGINX日志文件的处理 1.将访问日志中爬虫相关请求导出 cat access.log | grep Baiduspider > spider.log
使用PicGo存储markdown图片（阿里云或者github）
PicGo代替极简图床之前使用极简床图,但是后来好像挂了,真是一件悲伤的事,最近才发现了一个神器,开源的PicGo,已经有各个平台的版本了.链接如下:https://github.com/Molun ...
前端每日一知之让Chrome支持小于12px的文字
脑图在线链接本文内容依据[js每日一题]公众号精彩文章总结而来
鸿蒙UI开发快速入门 —— part07:组件状态管理之@Prop/@Link装饰器
1.前言我们在上一章学习了@State装饰器,@State装饰器的作用范围仅仅在当前组件,接下来,我们讨论如何从父组件中传入参数到子组件,让子组件随着父组件的状态发生变化.本章将要介绍的就是:@Pr ...
angr-ctf
angr 的项目地址 https://github.com/jakespringer/angr_ctf angr实战 00 拖到IDA 就是输入正确的指令才能通关这次试一下用angr来解题 goah ...
AT_kupc2019_g ABCのG問題题解
这题的难度不怎么好说,不过我认为还是挺简单的. 我们可以把答案看成由多个子图构成的图,这样我们只需要手打一个小子图,从中推出完整的答案. - 把小于子图范围的地方填上子图的字母 - 如果这个点的横坐标 ...
vba interpreter 结束
https://github.com/inshua/vba-interpreter 已覆盖几乎 VB 所有的特性,只是库还不够全. VB 语言自身较为落后,语法也有诸多设计不当.最严重的莫过于函数和数 ...
Qt/C++音视频开发53-本地摄像头推流/桌面推流/文件推流/监控推流等
一.前言编写这个推流程序,最开始设计的时候是用视频文件推流,后面陆续增加了监控摄像头推流(其实就是rtsp视频流).网络电台和视频推流(一般是rtmp或者http开头m3u8结尾的视频流).本地摄像 ...

Vue2创建项目

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

随机推荐

热门专题