從vue基礎(chǔ)開(kāi)始創(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)及說(shuō)明
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開(kāi)發(fā)環(huán)境配置
webpack.prod.conf.js // webpack生產(chǎn)環(huán)境配置
config——vue項(xiàng)目配置
dev.env.js // 開(kāi)發(fā)環(huán)境變量（看詞明意）
index.js //項(xiàng)目一些配置變量
prod.env.js // 生產(chǎn)環(huán)境變量
node_modules——[依賴(lài)包]
src——[項(xiàng)目核心文件]
App.vue——根組件
main.js——入口文件
router——路由配置
static// 靜態(tài)文件，比如一些圖片，json數(shù)據(jù)等
editorconfig// 定義代碼格式
gitignore// git上傳需要忽略的文件格式
index.html//主頁(yè)
package.json// 項(xiàng)目基本信息
README.md// 項(xiàng)目說(shuō)明
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訪(fǎng)問(wèn)接口，配置如下
main.js需要配置
import Api from './api'; Vue.prototype.$api=Api;
5、新建一個(gè)頁(yè)面Test/List.vue做增刪改查操作
創(chuàng)建一個(gè)文件夾Test，新建文件List.vue,router中配置:
import List from '@/Test/List'
{
path: '/List',
name: 'List',
component: List
}
7、啟動(dòng)訪(fǎng)問(wèn):npm run dev,訪(fǎng)問(wèn)地址#/List
添加搜索條件
添加表格顯示
定義對(duì)應(yīng)的參數(shù)和方法
總結(jié)
以上所述是小編給大家介紹的從vue基礎(chǔ)開(kāi)始創(chuàng)建一個(gè)簡(jiǎn)單的增刪改查的實(shí)例，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
因?yàn)関ue的響應(yīng)式是通過(guò) Object.defineProperty 來(lái)實(shí)現(xiàn)的，但是數(shù)組的length屬性是不能添加getter和setter，所有無(wú)法通過(guò)觀察length來(lái)判斷。這篇文章主要介紹了為什么Vue不能觀察到數(shù)組length的變化,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue中android4.4不兼容問(wèn)題的解決方法,需要的朋友可以參考下2018-09-09
解決vue單頁(yè)面應(yīng)用中動(dòng)態(tài)修改title問(wèn)題
這篇文章主要介紹了解決vue單頁(yè)面應(yīng)用中動(dòng)態(tài)修改title問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
vue使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù),文中的示例講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
這篇文章主要為大家詳細(xì)介紹了如何利用Vue.js編寫(xiě)一個(gè)拼圖華容道游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法
這篇文章主要給大家介紹了關(guān)于Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法,什么是pinia,可以理解為狀態(tài)管理工具,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
手寫(xiě)?Vue3?響應(yīng)式系統(tǒng)(核心就一個(gè)數(shù)據(jù)結(jié)構(gòu))
這篇文章主要介紹了手寫(xiě)?Vue3?響應(yīng)式系統(tǒng)(核心就一個(gè)數(shù)據(jù)結(jié)構(gòu)),響應(yīng)式就是被觀察的數(shù)據(jù)變化的時(shí)候做一系列聯(lián)動(dòng)處理。就像一個(gè)社會(huì)熱點(diǎn)事件，當(dāng)它有消息更新的時(shí)候，各方媒體都會(huì)跟進(jìn)做相關(guān)報(bào)道。這里社會(huì)熱點(diǎn)事件就是被觀察的目標(biāo)2022-06-06
vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)
本文主要介紹了vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue組件暴露和.js文件暴露接口操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue3中watch監(jiān)聽(tīng)器及源碼學(xué)習(xí)
本文主要介紹了Vue3中watch監(jiān)聽(tīng)器及源碼學(xué)習(xí),Watch偵聽(tīng)器在Vue3中特性進(jìn)行了一些改變和優(yōu)化,下面來(lái)詳解的介紹一下基本使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01