在Vue中引入element Ui并创建新的页面

本人使用VS Code进行编辑

首先新建一个空的文件夹，在空文件夹里面新建一个文件夹，并用VS Code打开上一级的空文件夹目录结构如下

第一步：右击新建的子文件夹，操作如下

第二步：注册淘宝镜像

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

 第三步：加载完毕，输入输入cnpm -v进行查看

 第四步：输入cnpm install -g vue-cli

 第五步：输入vue或者vue list,出现以下内容表示安装成功

 第六步：输入命令 vue init webpack + 项目名字 完成项目创建

 出现以上情况再次输入vue init webpack + 项目名字 完成项目创建

 

一路enter键 

 出现以下项目结构

 

在这里一定要按照黄色字体命令依次输入命令

如果直接使用npm run dev则出现以下情况

 

意思就是说我们现在在项目的上一级目录运行，必须在刚才创建的项目中运行

输入cd 然后按tab键，最后回车

然后输入npm run dev

 在浏览器的地址栏中输入http://localhost:8080出现以下页面，创建项目成功

 如何创建一个新的页面

 NewList.vue代码

<template>
   <div>
       这是新闻页
   </div>
</template>

Home.vue代码

<template>
   <div>
       这是 Home 页面
   </div>
</template>

再次运行出现以下情况

第七步

index.js代码

import Vue from 'vue'
import Router from 'vue-router'
import NewsList from '../components/news/NewsList.vue'
import Home from '../components/tabbar/Home.vue'
Vue.use(Router)

export default new Router({
routes: [
  {
    path: '/',
   redirect: 'Home',  //重定向：当路由为 / 界面时 跳转 到 Home 界面
  },
  {
    path: '/Home',
    name: 'Home',
    component: Home
  },
  {
    path: '/NewsList',
    name: 'NewsList',
    component: NewsList
  }
]
})

修改 App.vue 页面内容：添加 router-view、router-link 标签

<template>
<div id="app">
  <router-link to ="/Home">
  主页
  </router-link>
  <router-link to ="/NewsList">
  新闻页
  </router-link>
  <router-view></router-view>
</div>
</template>

<script>
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

输入npm run dev 命令

在浏览器地址栏输入http://localhost:8081

需要注意的是：我这里的端口号是8081，应该是我的8080端口号被占用了