环境准备
在前面我们学了很多vue相关的知识,学的比较独立,现在来开发一个简单的系统,使用vue全家桶和elementUI把之前学的东西都串起来。
我们基于Vue-CLI脚手架创建项目,需要安装Node.js8.9+
安装Vue-CLI
安装成功后,在命令行可以使用 vue 命令, 比如 查看版本
如果执行上面后,命令行提示 'vue' 不是内部或外部命令
解决方法:配置环境变量
1. 查看全局安装目录 nmp root -g
2.在 我的电脑 进入全局安装目录下,找到 vue.cmd
3. 右键计算机,属性—》高级系统设置—》环境变量,将 vue.cmd 的路径加入环境变量,点击“确定”
Vue CLI 创建项目
项目名为zz-mms
选择自定义安装,在Vue-CLI学习的时候,说过每个选项的含义,这里就不在说明
等待项目安装完成,启动项目测试
看到如下页面则成功
更改标题和图标
项目启动了,但是我们的标题是我们的项目名和图标是vue的官方图标,如下。
打开项目的public文件夹,里面的index.html文件,将title标签里的内容改为“邹邹管理系统”,网上找个icon,把favicon.ico替换,刷新网页,如下
初始化项目
默认的端口是8080,我们也可以更改端口,格式检查也是一件很麻烦的事情,我们要关闭,这些都可以在vue.config.js里面进行配置。
在zz-mms根目录下创建一个vue.config.js文件,写入如下配置
安装axios,处理异步请求,在项目根目录下进行安装
安装 pubsub-js ,实现非父子组件间通信
安装完之后查看 package.json 中是否有对应依赖
安装element-ui
Element 是饿了么平台推出的一套基于 Vue.js 开发的后台页面组件库。可以帮助我们快速的搭建一个基于elementui的网站
官网:https://element.eleme.cn/
可以通过cdn引用,不推荐
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
将 element-ui 模块通过本地安装为生产依赖。在 zz-ssm 目录下的命令行窗口,输入以下命令:
安装完之后再package.json文件查看是否安装成功。
引用element-ui
上面我们已经安装好了element-ui,现在来整合到我们的项目zz-mms中
在 zz-ssm\src\main.js 中导入 element-ui 和 element-ui/lib/theme-chalk/index.css ,
使用 Vue.use(ElementUI)
在 zz-ssm\src\main.js按下面内容修改
启动看是否配置成功,在zz-mms下执行下面命令,启动项目
没有报错,自动打开了网页则项目配置成功
如果你是在 VS Code 写代码,建议安装 Element UI Snippets 插件,有 element 语法提示,还有其他的插件也可以安装,方便我们写代码