vue之element-ui

注意：命令行都要使用管理员模式运行

第一步： 创建vue工程

下面处理项目，创建安装依赖等，都是在命令行进行处理。

1. 创建一个工程（vue）

vue init webpack vue

2. 安装依赖，我们需要安装 vue-router 、 element-ui 、 sass-loader 和 node-sass 四个插件

//进入工程目录
cd vue
//安装 Vue-router
npm install vue-router --save-dev
//安装 element-ui -s
npm i element-ui -s
//安装依赖
npm install
//安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
// 启动测试
npm run dev

3. npm命令解释：

• npm install moduleName ： 安装模块到项目目录下
• npm install -g moduleName ： -g 的意思是将模块安装到全局，具体安装到磁盘那个位置，要看 npm config prefix 的位置
• npm install -save moduleName ： --save 的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖， -D 为该命令的缩写

第二步：编写main.js，并且导入路由和elementui

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

第三步： 编写router下的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({
	routers:[
	{
		path: '/main',
		component: Main
	},{
		path: '/login',
		component: Login
	}
	]
});

第四步： App.vue文件书写

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

<script>

export default{
	name: 'App'
}

</script>