從vue基礎(chǔ)開始創(chuàng)建一個(gè)簡(jiǎn)單的增刪改查的實(shí)例代碼(推薦)
1、安裝vue-cli cnpm install vue-cli -g --執(zhí)行全局安裝
2、創(chuàng)建一個(gè)webpack的基礎(chǔ)項(xiàng)目；命令：vue init webpack myproject;
以下是項(xiàng)目的目錄結(jié)構(gòu)及說明
build是webpack配置
build.js // 生產(chǎn)環(huán)境構(gòu)建代碼
check-versions.js // 檢查node&npm等版本
utils.js // 構(gòu)建配置公用工具
vue-loader.conf.js // vue加載器
webpack.base.conf.js // webpack基礎(chǔ)環(huán)境配置
webpack.dev.conf.js // webpack開發(fā)環(huán)境配置
webpack.prod.conf.js // webpack生產(chǎn)環(huán)境配置
config——vue項(xiàng)目配置
dev.env.js // 開發(fā)環(huán)境變量（看詞明意）
index.js //項(xiàng)目一些配置變量
prod.env.js // 生產(chǎn)環(huán)境變量
node_modules——[依賴包]
src——[項(xiàng)目核心文件]
App.vue——根組件
main.js——入口文件
router——路由配置
static// 靜態(tài)文件，比如一些圖片，json數(shù)據(jù)等
editorconfig// 定義代碼格式
gitignore// git上傳需要忽略的文件格式
index.html//主頁
package.json// 項(xiàng)目基本信息
README.md// 項(xiàng)目說明
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
新建一個(gè)api.js文件用作配置axios訪問接口，配置如下
main.js需要配置
import Api from './api'; Vue.prototype.$api=Api;
5、新建一個(gè)頁面Test/List.vue做增刪改查操作
創(chuàng)建一個(gè)文件夾Test，新建文件List.vue,router中配置:
import List from '@/Test/List'
{
path: '/List',
name: 'List',
component: List
}
7、啟動(dòng)訪問:npm run dev,訪問地址#/List
添加搜索條件
添加表格顯示
定義對(duì)應(yīng)的參數(shù)和方法
總結(jié)
以上所述是小編給大家介紹的從vue基礎(chǔ)開始創(chuàng)建一個(gè)簡(jiǎn)單的增刪改查的實(shí)例，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue?過濾、模糊查詢及計(jì)算屬性?computed詳解
計(jì)算屬性是vue里面為了簡(jiǎn)化在模板語法中對(duì)響應(yīng)式屬性做計(jì)算而存在的，這篇文章主要介紹了vue?過濾、模糊查詢（計(jì)算屬性?computed）,需要的朋友可以參考下2022-11-11
利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法
這篇文章主要給大家介紹了關(guān)于利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
vue服務(wù)區(qū)緩存分為頁面緩存、組建緩存和接口緩存，本文通過實(shí)例代碼逐一給大家介紹，本文重點(diǎn)給大家介紹vue服務(wù)端渲染添加緩存的方法，感興趣的朋友跟隨小編一起看看吧2018-09-09
Element UI是一套基于Vue的桌面端組件庫,封裝好了很多常用的UI組件,下面這篇文章主要給大家介紹了關(guān)于vue中elementUI里面一些插件的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式
文件上傳是web開發(fā)中一個(gè)常見的需求,Vue.js作為一款流行的前端框架,也提供了方便的方法來實(shí)現(xiàn)文件上傳功能,下面這篇文章主要給大家介紹了關(guān)于基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式,需要的朋友可以參考下2024-03-03
Vue3+ElementPlus在el-table表格中顯示時(shí)間的示例代碼
文章介紹了如何在Vue3+ElementPlus的el-table表格中顯示時(shí)間,并提供了相關(guān)的代碼示例,感興趣的朋友一起看看吧2025-02-02
vue微信分享的實(shí)現(xiàn)(在當(dāng)前頁面分享其他頁面)
這篇文章主要介紹了vue微信分享，在當(dāng)前頁面分享其他頁面，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法
下面小編就為大家分享一篇Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于vue-router懶加載的3種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
vue與django集成打包的實(shí)現(xiàn)方法
這篇文章主要介紹了vue與django集成打包的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11