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
}
]
}
]
})