Element入门案例（Hello World!）

Vue脚手架得安装、入门项目测试、Element运行测试、Element入门案例及注意事项:https://blog.csdn.net/qq_40790831/article/details/88129800

一、Element是什么？

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
官网：http://element-cn.eleme.io/#/zh-CN

二、Element的目录结构。

element-starter-master：项目文件名。

node_modules:主要是用于放用包管理工具下载安装了的包，比如webpack、gulp、grunt这些工具。
webpack.config.js: 项目配置文件
src：项目源码文件

assets：项目打包后的文件。
App.vue: 项目启动入口
main.js: 项目的js启动入口

三、修改APP.vue文件

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    startHacking () {
      this.$notify({
        title: 'It works!',
        type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
        duration: 5000
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style>

四、增加routes.js文件

注意：应该先在src目录下新建router文件夹，然后在router文件夹新建routes.js文件，routes.js 文件内容应为：

import index from '../views/Index.vue'

let routes = [
    {
        path:'/index', // 指定url
        component:index, // 指定哪个视图
        name:'首页', // 页面标题
        hidden:true
    }
];

export default routes;

五、增加Index.vue文件

注意：应该先在src目录下新建views文件夹，然后在views目录下，新建Index.vue文件，Index.vue文件内容应为：

<template>
    <div id="app">
        <div>Hello World!</div>
    </div>
</template>

<!-- js -->
<script>
    export default { 
  
    }
</script>

<!-- css -->
<style>

</style>

六、修改main.js文件

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import vueRouter from 'vue-router' // 引入vue路由
import routes from './router/routes.js' // 引入自己的路由js

Vue.use(ElementUI)
Vue.use(vueRouter) // vueRouter

// 实例化对象
const router = new vueRouter({
  routes,
  mode:'history'
})

new Vue({
  router, // 添加路由对象
  el: '#app',
  render: h => h(App)
})

七、重启服务

1、在项目文件目录下，地址栏中输入：cmd,回车，输入命令npm install vue-router --save ，回车（因为项目文件中增加了路由设置，需要增加路由依赖）。

2、输入命令：npm run dev ，重启服务。

3、启动成功后，打开浏览器，在地址栏输入：http://127.0.0.1:8010/index，出现下图内容，则案例运行成功。