詳解如何使用vue-cli腳手架搭建Vue.js項(xiàng)目
1. 前言
vue-cli 一個(gè)簡(jiǎn)單的構(gòu)建Vue.js項(xiàng)目的命令行界面
整體過程：
$ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev
后面分步說明。
2. 安裝
前提條件，Node.js >=4.x版本，建議使用6.x版本。npm版本 > 3.x
全局安裝vue-cli
$ npm install -g vue-cli
3. 使用
$ vue init <template-name> <project-name>
vue官方提供了多個(gè)打包工具版本的模版。我們可以使用vue list命令查看，當(dāng)前可以使用的模版。
$ vue list
我們?cè)谶@里，使用webpack模版。 功能齊全的webpack & vue-loader 提供熱加載、代碼檢查、單元測(cè)試和css分離
$ vue init webpack vue-element-admin
之后，在E：\project文件夾下面，會(huì)有剛初始化的構(gòu)建的項(xiàng)目vue-element-admin
4. 運(yùn)行結(jié)果
項(xiàng)目基礎(chǔ)結(jié)構(gòu)已經(jīng)搭建好了，現(xiàn)在來啟動(dòng)它。
進(jìn)入項(xiàng)目文件:
$ cd vue-element-admin
安裝依賴：
中國(guó)行情原因，直接安裝，有時(shí)候會(huì)失敗。我們一般使用npm的淘寶鏡像cnpm。
先安裝cnpm：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
之后，使用:
$ cnpm install
你直接安裝也可以的：
$ npm install
運(yùn)行：
$ npm run dev
啟動(dòng)之后，自動(dòng)打開默認(rèn)瀏覽器
之后，就可以進(jìn)行本地開發(fā)，實(shí)時(shí)預(yù)覽開發(fā)效果。
5. 打包部署
項(xiàng)目開發(fā)完成之后，可以使用npm run build進(jìn)行打包工作
$ npm run build
打包完成之后，會(huì)生成dist文件夾，項(xiàng)目上線時(shí)候，只需要將dist文件夾放到服務(wù)器就行了。
6. 項(xiàng)目結(jié)構(gòu)
相關(guān)文章
基于Vue3和Plotly.js實(shí)現(xiàn)交互式3D圖
這篇文章主要介紹了基于Vue3和Plotly.js實(shí)現(xiàn)交互式3D圖,本代碼旨在為數(shù)據(jù)可視化提供一個(gè)交互式圖表,允許用戶動(dòng)態(tài)控制圖表中線條的顏色和可見性,此功能對(duì)于探索大型數(shù)據(jù)集或突出特定數(shù)據(jù)子集非常有用,需要的朋友可以參考下2024-07-07
Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁功能示例
本文主要介紹了Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue實(shí)現(xiàn)表單數(shù)據(jù)的增刪改功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單數(shù)據(jù)的增刪改功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios, axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧2022-08-08
vue使用el-table 添加行手動(dòng)填寫數(shù)據(jù)和刪除行及提交保存功能
遇到這樣的需求點(diǎn)擊新增按鈕實(shí)現(xiàn)下列彈窗的效果,點(diǎn)擊添加行新增一行,點(diǎn)擊刪除進(jìn)行刪除行,點(diǎn)擊提交將數(shù)據(jù)傳遞到后端進(jìn)行保存,怎么實(shí)現(xiàn)的呢,下面通過實(shí)例代碼給大家詳細(xì)講解,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue3 elementPlus部分組件樣式修改的方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-01-01
利用vue3+threejs仿iView官網(wǎng)大波浪特效實(shí)例
最近好幾個(gè)vue項(xiàng)目都是用ivew作為UI框架,所以下面這篇文章主要給大家介紹了關(guān)于如何利用vue3?+?threejs仿iView官網(wǎng)大波浪特效的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
這篇文章主要介紹了element-ui 中的table的列隱藏問題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue ElementUI實(shí)現(xiàn)異步加載樹
這篇文章主要為大家詳細(xì)介紹了vue ElementUI實(shí)現(xiàn)異步加載樹，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
教你在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能
這篇文章主要給大家介紹了關(guān)于如何在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06