前端工程的搭建和认识

node
https://nodejs.org/en/
查看node是否安装完毕

node -v

配置阿里加速，推荐安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install -g @vue/cli

查看vue版本

vue -version

初始化项目

vue init webpack [项目名]

安装element
https://element.eleme.cn/2.13/#/zh-CN/component/installation

npm i element-ui -S

在项目的main.js中引入element组件和样式

// 引入element-UI+
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue使用ElementUI

Vue.use(ElementUI);

安装router用于路由通信跳转，类似于Ajax

npm install axios -S

引入axios通信技术

// 引入 Ajax 技术
import axios from 'axios'

Vue绑定成为组件，使用axios

Vue.prototype.$http=axios

新建Vue文件Main.vue，查看文件结构
注意在模板样式中只能拥有一个根标签

# 模板样式，只能有一个根标签
<template>
</template>
# 行为区，js代码和后端交互
<script>
</script>
# 样式区，css
<style>
</style>

assert目录下新建文件夹css，新建文件main.css

html,
body,
#app {
    margin: 0px;
    height: 100%;
    padding: 0px;
}

在main.js 中引入样式

import './assets/css/main.css'

router目录下的index.js引入Main.vue等文件

import Main from '../components/Main'
import Administrators from '../components/Administrators'

Vue使用Router

// 使用Vue+Router
Vue.use(Router)

路由跳转绑定

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Main',
      component: Main,
      children:[
        {
          path: '/administrators',
          name: 'administrators',
          component: Administrators
        },
        {
          path: '/users',
          name: 'users',
          component: Users
        }
      ]
    }
  ]
})