1 安装
vue - cli cnpm install vue - cli - g
-- 执行全局安装
2 创建一个 webpack 的基础项目; 命令:
- vue init webpack myproject
- ;
以下是项目的目录结构及说明
build 是 webpack 配置
- build.js // 生产环境构建代码
- check-versions.js // 检查 node&npm 等版本
- utils.js // 构建配置公用工具
- vue-loader.conf.js // vue 加载器
- webpack.base.conf.js // webpack 基础环境配置
- webpack.dev.conf.js // webpack 开发环境配置
- webpack.prod.conf.js // webpack 生产环境配置
configvue 项目配置
- dev.env.js // 开发环境变量 (看词明意)
- index.js // 项目一些配置变量
- prod.env.js // 生产环境变量
node_modules[依赖包]
src[项目核心文件]
App.vue 根组件
main.js 入口文件
router 路由配置
- static// 静态文件, 比如一些图片, json 数据等
- editorconfig// 定义代码格式
- gitignore// git 上传需要忽略的文件格式
- index.html// 主页
- package.json// 项目基本信息
- README.md// 项目说明
3 安装 element-ui 命令: npm i element-ui -S
main.js 中需要配置
- import elementui from 'element-ui'
- import 'element-ui/lib/theme-chalk/index.CSS'
- Vue.use(elementui);
4 安装 axios 命令: npm i axios -S
新建一个 api.js 文件用作配置 axios 访问接口, 配置如下
main.js 需要配置
- import Api from './api';
- Vue.prototype.$api = Api;
5 新建一个页面 Test/List.vue 做增删改查操作
创建一个文件夹 Test, 新建文件 List.vue,router 中配置:
- import List from '@/Test/List'
- {
- path: '/List',
- name: 'List',
- component: List
- }
7 启动访问: npm run dev, 访问地址 #/List
添加搜索条件
添加表格显示
定义对应的参数和方法
来源: http://www.jb51.net/article/135013.htm