詳解如何使用vue-cli腳手架搭建Vue.js項(xiàng)目
1. 前言
vue-cli 一個(gè)簡(jiǎn)單的構(gòu)建Vue.js項(xiàng)目的命令行界面
整體過(guò)程：
$ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev
后面分步說(shuō)明。
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)在來(lái)啟動(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)文章
本文主要介紹了vue實(shí)現(xiàn)瀏覽器桌面通知的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue導(dǎo)入Echarts實(shí)現(xiàn)折線圖
這篇文章主要給大家介紹了關(guān)于vue+echarts實(shí)現(xiàn)折線圖的方法與注意事項(xiàng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-12-12
vue.js選中動(dòng)態(tài)綁定的radio的指定項(xiàng)
這篇文章主要介紹了vue.js選中動(dòng)態(tài)綁定的radio的指定項(xiàng),需要的朋友可以參考下2017-06-06
element?tab標(biāo)簽管理路由頁(yè)面的項(xiàng)目實(shí)踐
本文主要介紹了element?tab標(biāo)簽管理路由頁(yè)面的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vue不同方法跳轉(zhuǎn)頁(yè)面，本文給大家分享多種方法，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
vue中利用pinyin-pro純前端實(shí)現(xiàn)拼音的模糊搜索功能
這篇文章主要介紹了vue中利用pinyin-pro純前端實(shí)現(xiàn)拼音的模糊搜索,實(shí)現(xiàn)思路很簡(jiǎn)單，通過(guò)安裝配置插件編寫工具類，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過(guò)實(shí)例代碼給大家分享解決方法，需要的朋友可以參考下2022-08-08
快速解決Error: error:0308010C:digital envelope ro
因?yàn)?nbsp;node.js V17版本中最近發(fā)布的OpenSSL3.0, 而OpenSSL3.0對(duì)允許算法和密鑰大小增加了嚴(yán)格的限制,下面通過(guò)本文給大家分享快速解決Error: error:0308010C:digital envelope routines::unsupported的三種解決方案,感興趣的朋友一起看看吧2024-02-02
在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)。這篇文章主要介紹了詳解vue2.6插槽更新v-slot用法總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03
這篇文章主要介紹了Vue中jsx不完全應(yīng)用指南小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11