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生產環境配置

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// 項目說明

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

添加搜索條件

添加表格顯示

定義對應的參數和方法

總結

以上所述是小編給大家介紹的從vue基礎開始創建一個簡單的增刪改查的實例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！

網頁題目：從vue基礎開始創建一個簡單的增刪改查的實例代碼(推薦)
標題鏈接：http://vcdvsql.cn/article18/gdigdp.html

成都網站建設公司_創新互聯，為您提供搜索引擎優化、定制開發、網站設計公司、App設計、全網營銷推廣、商城網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯