快捷導(dǎo)航

vue2.0實(shí)戰(zhàn)之使用vue-cli搭建項(xiàng)目（2）

更新時(shí)間：2017年03月27日 09:18:11 作者：Marven

這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)戰(zhàn)第二篇使用vue-cli搭建項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Vue-cli是官方推薦的快速構(gòu)建單頁(yè)應(yīng)用的腳手架。官方給的建議，如果你是初次嘗試Vue，哪就老老實(shí)實(shí)用普通的書(shū)寫(xiě)引入js文件，這里牽扯太多的東西，例如webpack、npm、nodejs等等，很容易成就從入門到放棄的思想。這篇文章本身就是按照官方的文檔中的構(gòu)建流程來(lái)的（官方構(gòu)建建議）。一下是構(gòu)建過(guò)程。

一、安裝 node.js

首先需要安裝node環(huán)境，可以直接到中文官網(wǎng)http://nodejs.cn/下載安裝包。

安裝完成后，可以命令行工具中輸入node -v和npm -v，如果能顯示出版本號(hào)，就說(shuō)明安裝成功。

二、安裝 vue-cli

安裝好了 node，我們可以直接全局安裝 vue-cli：

npm install -g vue-cli

因?yàn)楦鞣N不可描述的原因，使用npm安裝會(huì)很慢，而且很容易出錯(cuò)，所以推薦使用cnpm來(lái)安裝。

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

安裝成功后，使用 cnpm 安裝 vue-cli 和 webpack。

cnpm install -g vue-cli

安裝完成后，可以使用vue -V 查看是否安裝成功。

三、生成項(xiàng)目

首先需要在命令行中進(jìn)入到項(xiàng)目目錄，然后輸入：

vue init webpack Vue-demo

其中 webpack 是模板名稱,Vue-demo 是自定義的項(xiàng)目名稱，命令執(zhí)行之后，會(huì)在當(dāng)前目錄生成一個(gè)以該名稱命名的項(xiàng)目文件夾。

配置完成后，可以看到目錄下多出了一個(gè)項(xiàng)目文件夾，里面就是 vue-cli 創(chuàng)建的一個(gè)基于 webpack 的 vue.js 項(xiàng)目

然后進(jìn)入項(xiàng)目目錄（cd Vue-Project），使用 cnpm 安裝依賴

cnpm install

然后啟動(dòng)項(xiàng)目

npm run dev

四、打包上線

自己的項(xiàng)目文件都需要放到 src 文件夾下

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

npm run build

打包完成后，會(huì)生成 dist 文件夾，如果已經(jīng)修改了文件路徑，可以直接打開(kāi)本地文件查看

項(xiàng)目上線時(shí)，只需要將 dist 文件夾放到服務(wù)器就行了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue項(xiàng)目環(huán)境搭建詳細(xì)總結(jié)
這篇文章主要為大家介紹了Vue項(xiàng)目環(huán)境搭建總結(jié)篇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
js數(shù)組的 entries() 獲取迭代方法
這篇文章主要介紹了js數(shù)組的 entries() 獲取迭代方法，entries() 方法返回一個(gè)數(shù)組的迭代對(duì)象，該對(duì)象包含數(shù)組的鍵值對(duì) (key/value)。下面來(lái)詳細(xì)介紹該neural,需要的朋友可以參考一下
2021-10-10
Vue使用預(yù)渲染代替SSR的方法
這篇文章主要介紹了Vue使用預(yù)渲染代替SSR的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue3網(wǎng)絡(luò)請(qǐng)求添加loading過(guò)程
這篇文章主要介紹了vue3網(wǎng)絡(luò)請(qǐng)求添加loading過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼
本文主要介紹了FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
Vue.js 通過(guò)jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁(yè)面的方法
今天小編小編就為大家分享一篇Vue.js 通過(guò)jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue中vee validate表單校驗(yàn)的幾種基本使用
這篇文章主要介紹了vee-validate表單校驗(yàn)的基本使用,需要的朋友可以參考下
2018-06-06
keep-alive include和exclude無(wú)效問(wèn)題及解決
這篇文章主要介紹了keep-alive include和exclude無(wú)效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vue程序化的事件監(jiān)聽(tīng)器(實(shí)例方案詳解)
本文通過(guò)兩種方案給大家介紹了Vue程序化的事件監(jiān)聽(tīng)器，每種方案通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2020-01-01