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. 項目結構

轉載于:https://www.cnblogs.com/qcl-524077/articles/9234885.html

總結

以上是生活随笔為你收集整理的vue里搭建工程流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。