vue2.0實戰(zhàn)之使用vue-cli搭建項目（2）
Vue-cli是官方推薦的快速構(gòu)建單頁應(yīng)用的腳手架。官方給的建議，如果你是初次嘗試Vue，哪就老老實實用普通的書寫引入js文件，這里牽扯太多的東西，例如webpack、npm、nodejs等等，很容易成就從入門到放棄的思想。這篇文章本身就是按照官方的文檔中的構(gòu)建流程來的（官方構(gòu)建建議）。一下是構(gòu)建過程。
一、 安裝 node.js
首先需要安裝node環(huán)境，可以直接到中文官網(wǎng)http://nodejs.cn/下載安裝包。
安裝完成后，可以命令行工具中輸入node -v和npm -v，如果能顯示出版本號，就說明安裝成功。
二、安裝 vue-cli
安裝好了 node，我們可以直接全局安裝 vue-cli：
npm install -g vue-cli
因為各種不可描述的原因，使用npm安裝會很慢，而且很容易出錯，所以推薦使用cnpm來安裝。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝成功后，使用 cnpm 安裝 vue-cli 和 webpack。
cnpm install -g vue-cli
安裝完成后，可以使用vue -V 查看是否安裝成功。
三、生成項目
首先需要在命令行中進入到項目目錄，然后輸入：
vue init webpack Vue-demo
其中 webpack 是模板名稱,Vue-demo 是自定義的項目名稱，命令執(zhí)行之后，會在當前目錄生成一個以該名稱命名的項目文件夾。
配置完成后，可以看到目錄下多出了一個項目文件夾，里面就是 vue-cli 創(chuàng)建的一個基于 webpack 的 vue.js 項目
然后進入項目目錄（cd Vue-Project），使用 cnpm 安裝依賴
cnpm install
然后啟動項目
npm run dev
四、打包上線
自己的項目文件都需要放到 src 文件夾下
項目開發(fā)完成之后，可以輸入npm run build 來進行打包工作
npm run build
打包完成后，會生成 dist 文件夾，如果已經(jīng)修改了文件路徑，可以直接打開本地文件查看
項目上線時，只需要將 dist 文件夾放到服務(wù)器就行了。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue中動態(tài)添加class類名的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇vue-cli項目修改文件熱重載失效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue使用axios添加請求頭方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue如何自定義封裝API組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
基于Vue3+Three.js實現(xiàn)一個3D模型可視化編輯系統(tǒng)
這篇文章主要介紹了基于Vue3+Three.js實現(xiàn)一個3D模型可視化編輯系統(tǒng),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
vue-quill-editor富文本編輯器上傳視頻功能詳解
需求需要實現(xiàn)富文本的功能,同時富文本中還可以上傳視頻和圖片,選來選去最后決定了用這個富文本編輯器,下面這篇文章主要給大家介紹了關(guān)于vue-quill-editor富文本編輯器上傳視頻功能的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue3使用mitt進行組件通信的步驟，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-05-05
本文通過實例代碼給大家介紹了vue 中swiper的使用，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
今天小編就為大家分享一篇vue中各選項及鉤子函數(shù)執(zhí)行順序詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08