1、vue模块开发(前提:需要安装node.js和npm环境)
1)安装webpack环境
打开cmd,输入一下命令(-g 是全局安装):
npm install webpack -g
2)全局安装vue脚手架
输入一下命令:
npm install -g @vue/cli-init
如果通过 vue -V,提示vue不是内部命令也不是外部命令,网上都说是系统环境变量配置的问题,可是我的vue.cmd文件都没有生成,所以用npm install -g vue-cli 命令安装后就成功了。
3)初始化vue项目
vue init webpack appname: vue脚手架使用webpack模板初始化一个appname项目。比如我创建一个vue-demo的项目。
vue init webpack vue-demo
目录或文件 | 描述 |
---|---|
bulid | 里面是一些操作文件,使用npm run * 时执行的就是这里的文件。 |
config | 配置文件,执行文件需要的配置信息。例如运行的端口,IP等等信息。 |
src | 资源文件,所有的组件以及所用的图片都是在这个文件夹下放着,看一下这个文件夹都放了哪些东西。 |
assets | 资源文件夹,放图片之类的资源。 |
components | 组件文件夹,写的所有组件都放在这个文件夹下。 |
router | 路由文件夹,这个决定了页面的跳转规则。 |
App.vue | 应用组件,所有自己写的组件,都是在这个组件之上运行了。 |
main.js | webpack入口文件。 |
static | 静态文件。 |
index.html | 首页。 |
package.json | 依赖包。 |
4)启动vue项目
项目的package.json中有scripts,代表我们能运行的命令。npm start = npm run dev: 启动项目。npm run build:将项目打包,我们来启动vue-demo的项目。
5)使用启动的默认端口访问,输入localhost:8080
2、整合elementUI快速开发
1)安装ElementUI
npm i element-ui -S
2)引入 Element
在 main.js 中导入以下内容
3)使用element的组件
比如单选框的使用。
页面显示
4)element的Container 布局容器
①、将官网的demo放入App.vue中
②、创建MyTable.vue并添加路由
③、点击用户列表和Hello菜单,跳转对应的路由。