溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

詳解如何使用vue-cli腳手架搭建Vue.js項目

發布時間:2020-08-27 10:24:07 來源:腳本之家 閱讀:190 作者:weiqinl 欄目:web開發

1. 前言

vue-cli 一個簡單的構建Vue.js項目的命令行界面

整體過程:

$ 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 

詳解如何使用vue-cli腳手架搭建Vue.js項目

詳解如何使用vue-cli腳手架搭建Vue.js項目

3. 使用

 $ vue init <template-name> <project-name> 

vue官方提供了多個打包工具版本的模版。我們可以使用vue list命令查看,當前可以使用的模版。

$ vue list 

詳解如何使用vue-cli腳手架搭建Vue.js項目

我們在這里,使用webpack模版。 功能齊全的webpack & vue-loader 提供熱加載、代碼檢查、單元測試和css分離

$ vue init webpack vue-element-admin

詳解如何使用vue-cli腳手架搭建Vue.js項目

之后,在E:\project文件夾下面,會有剛初始化的構建的項目vue-element-admin

詳解如何使用vue-cli腳手架搭建Vue.js項目

4. 運行結果

項目基礎結構已經搭建好了,現在來啟動它。

進入項目文件:

$ cd vue-element-admin 

安裝依賴:

中國行情原因,直接安裝,有時候會失敗。我們一般使用npm的淘寶鏡像cnpm。

先安裝cnpm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之后,使用:

$ cnpm install

你直接安裝也可以的:

$ npm install 

運行:

$ npm run dev

詳解如何使用vue-cli腳手架搭建Vue.js項目

啟動之后,自動打開默認瀏覽器

詳解如何使用vue-cli腳手架搭建Vue.js項目

之后,就可以進行本地開發,實時預覽開發效果。

5. 打包部署

項目開發完成之后,可以使用npm run build進行打包工作

$ npm run build

打包完成之后,會生成dist文件夾,項目上線時候,只需要將dist文件夾放到服務器就行了。

6. 項目結構

詳解如何使用vue-cli腳手架搭建Vue.js項目

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女