1. 前言

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專(zhuān)注于成都定制網(wǎng)站,高端網(wǎng)頁(yè)制作,對(duì)公路鉆孔機(jī)等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專(zhuān)業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專(zhuān)業(yè)網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

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   

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 

安裝依賴(lài)：

中國(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)打開(kāi)默認(rèn)瀏覽器

之后，就可以進(jìn)行本地開(kāi)發(fā)，實(shí)時(shí)預(yù)覽開(kāi)發(fā)效果。

5. 打包部署

項(xiàng)目開(kāi)發(fā)完成之后，可以使用npm run build進(jìn)行打包工作

$ npm run build

打包完成之后，會(huì)生成dist文件夾，項(xiàng)目上線時(shí)候，只需要將dist文件夾放到服務(wù)器就行了。

6. 項(xiàng)目結(jié)構(gòu)