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


3. 使用
$ vue init <template-name> <project-name>
vue官方提供了多個打包工具版本的模版。我們可以使用vue list命令查看,當前可以使用的模版。
$ vue list

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

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

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

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

之后,就可以進行本地開發,實時預覽開發效果。
5. 打包部署
項目開發完成之后,可以使用npm run build進行打包工作
$ npm run build
打包完成之后,會生成dist文件夾,項目上線時候,只需要將dist文件夾放到服務器就行了。
6. 項目結構

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