注意：命令行都要使用管理员模式运行
第一步： 创建vue工程
下面处理项目，创建安装依赖等，都是在命令行进行处理。
- 创建一个工程（vue）
vue init webpack vue
- 安装依赖，我们需要安装 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
- 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>