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最吸引我的有三 ...

随机推荐

mysql5.7之JSON数据类型
1.json对象 1.1.方法使用对象操作的方法进行查询:字段->'$.json属性' 使用函数进行查询:json_extract(字段, '$.json属性') 获取JSON数组/对象长度: ...
ClickHouse之基础使用
[安装] [YUM] 1.添加官方存储库 sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://packag ...
Python之时间日期操作
常用时间操作的函数汇总, 涵盖常用的time datetime 1.计算两个日期相差天数 import datetime str1 = '2021-10-20' str2 = '2021-10- ...
150页的剑指Offer解答PDF，它来了！！！
它来了!!! 终于整理出了第一版剑指Offer的PDF,主要以Java语言为主,一共67道题,100多页. 领取方式如下(无套路直接获取百度网盘的链接,如果链接失效可以直接找我): [秦怀杂货店]公 ...
ZCMU-1156
思路: 要改变的是一个范围的情况,所以正常情况下会超时. 查阅后知道应该用一个叫做树状数组的结构. 查阅和树状数组的后续情况这个也不错注意: 我没怎么看懂,可能没太仔细看. 树状数组当中存在的是前 ...
[天坑]之qrcode二维码在app内置浏览器中无法显示问题
记录一下最近的工作难点,之一... 首先本项目使用的是qrcode-generator,市面上生成二维码的第三方库有很多qrcode.vue.qrcode.QRious等等 <div id=&q ...
uni-app下载文件在ios下失败
标签: js uni-app 前情 uni-app是我很喜欢的跨平台框架,它能开发小程序,H5,APP(安卓/iOS),对前端开发很友好,自带的IDE让开发体验也很棒,公司项目就是主推uni-app. ...
openEuler-怎么看服务器操作系统是不是欧拉系统？
[root@localhost ~]# cat /etc/os-release NAME="openEuler" VERSION="22.03 (LTS-SP2)&qu ...
共建共荣金融生态！金融级数字底座“源启”与GoldenDB数据库完成互认证
近日,中电金信金融级数字底座"源启"顺利与金篆信科GoldenDB分布式数据库完成互认证.GoldenDB数据库安全稳定运行在"源启"之上,整体性能表现卓越,进 ...
【XML】Java创建XML文档
package example01; import org.w3c.dom.Document; import org.w3c.dom.Element; import javax.xml.parsers ...

Vue2创建项目

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

随机推荐

热门专题