vue结合element-ui搭建简易后台系统

1、项目使用的相关技术

vue2.0
webpack
element ui
vue-router

2、环境搭建

• 是否安装node： node -v 检测本地是否安装node
• 检查本地npm版本： npm -v
• npm install webpack -g 全局安装webpack
• npm install vue-cli -g 安装vue脚手架

3、创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>

初始化的设置，如下输入:

Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)
Project name (vue-test)直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字
Use sass 用sass 选的yes

安装依赖 npm install
运行项目 npm run dev
正常情况下，现在就可以在浏览器中看到如下界面啦

4、安装其他依赖

npm install element-ui --save-dev
npm install vue-router --save-dev
npm install font-awesome --save-dev
npm install style-loader --save-dev

style-loader的用处：
css-loader 是处理css文件中的url()等
style-loader 将css插入到页面的style标签
less-loader 是将less文件编译成css
sass-loader 是将sass文件编译成css

5、实际的项目开发

详细的代码code 可以参考如下github地址（git clone 项目地址，👏欢迎指错）：
https://github.com/wylibra/mydemo-vue

6、学习

• router的使用
• $router.options.routes 路由数组
• $route.path 路由
• 导航折叠与展开显示

7、遇到问题：

• 如何把本地项目部署到github？

        在github中新建项目； 
        复制项目生成的远端地址（ 如 https://github.com/wylibra/mydemo-vue.git）；
        提交本地代码到本地仓储（git add .   git commit -m '注释'）；
        使用命令：git remote add origin https://github.com/wylibra/mydemo-vue.git；
                          git push -u origin master
        至此 项目成功部署到远端github中

以上都是个人零散的笔记📒，粗糙不细致的地方尽管指出，愿意接受意见，更好的总结学习
http://a114c675.wiz03.com/share/s/2x5cpR2STAEP2U6pTf37HRJq1NDeIv03C4xr2CCrdX29BkpF