Vue结合Element UI实战

创建工程

1. 创建一个名为hello-vue的工程

vue init webpack hello-vue

2. 安装依赖

需要安装 vue-router、element-ui、sass-loader和node sass 四个插件

进入工程目录

cd hello-vue
# 安装vue-router
npm install vue-router --save-dev
# 安装element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试,需将package.json中的sass-loader版本改为7.3.1 , node-sass改为4.14.1
npm run dev

3. Npm指令解释

npm install moduleName：安装模块到项目下
npm install -g moduleName：-g的意思是将模块安装到全局
npm install -save moduleName：-save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写
npm install -save-dev moduleName：--save-dev的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖，-D为该命令的缩写

main.js

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(router);
Vue.use(ElementUI);

new Vue({
el: '#app',
router,
render: h => h(App) //ElementUI
})

index.js(路由配置)

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'

Vue.use(Router)

export default new Router({
routes: [
{
path: "/login",
component: Login
},
{
path: "/main",
component: Main
}
]
});

Login.vue

App.vue

Main.vue