从vue基础开始创建一个简单的增删改查的实例代码(推荐)

从 Vue 基础开始创建一个简单的增删改查的实例代码 本文主要介绍了如何从 Vue 基础开始创建一个简单的增删改查的实例代码，包括安装 Vue-cli、创建webpack基础项目、安装 Element-UI 和 Axios 库、创建 Test/List.vue 页面等步骤。 一、安装 Vue-cli 需要安装 Vue-cli，使用以下命令： cnpm install vue-cli -g 二、创建 webpack 基础项目 创建一个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 生产环境配置 * config：Vue 项目配置 + 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：项目说明 四、安装 Element-UI 安装 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); 五、安装 Axios 安装 Axios，使用以下命令： npm i axios -S 新建一个 api.js 文件用作配置 Axios 访问接口，配置如下： import axios from 'axios'; main.js 需要配置： import Api from './api'; Vue.prototype.$api = Api; 六、新建 Test/List.vue 页面 新建一个文件夹 Test，新建文件 List.vue，在 router 中配置： import List from '@/Test/List'; { path: '/List', name: 'List', component: List } 七、启动访问 启动访问，使用以下命令： npm run dev 访问地址：#/List 添加搜索条件，添加表格显示定义对应的参数和方法。 本文介绍了从 Vue 基础开始创建一个简单的增删改查的实例代码，包括安装 Vue-cli、创建 webpack 基础项目、安装 Element-UI 和 Axios 库、创建 Test/List.vue 页面等步骤，希望对大家有所帮助。如果大家有任何疑问，请留言，小编会及时回复大家的。