使用vue-cli腳手架工具創(chuàng)建項(xiàng)目步驟

1匀钧,安裝node.js

????? 到中文官網(wǎng)http://nodejs.cn/下載安裝包,安裝完成后可以在dos命令行中輸入node -vnpm -v來檢測安裝版本即可判斷是否安裝成功,如圖:

2软啼,安裝vue-cli

安裝完node之后姐叁,我們可以全局安裝vue-cli,

npm install -g vue-cli?????

但是這種安裝方式比較慢瓦盛,推薦使用國內(nèi)鏡像來安裝,所以我們先設(shè)置 cnpm:

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

如果安裝失敗外潜,可以使用npm cache clean清理緩存原环,然后再重新安裝。后面的安裝過程中处窥,如有安裝失敗的情況嘱吗,也需要先清理緩存

同樣可以使用cnpm -v查看是否安裝成功

然后使用 cnpm 安裝 vue-cli 和 webpack

cnpm install -g vue-cli

最新的 vue 項(xiàng)目模板中,都帶有 webpack 插件滔驾,所以這里可以不安裝 webpack

安裝完成后谒麦,可以使用vue -V(注意 V 大寫)查看是否安裝成功。

如果提示“無法識(shí)別 'vue' ” 哆致,有可能是 npm 版本過低绕德,可以使用 npm install -g npm 來更新版本

3、生成項(xiàng)目

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

vue init webpack Vue-Project

其中 webpack 是模板名稱耻蛇,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates

Vue-Project 是自定義的項(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

(如果運(yùn)行cnpm install報(bào)錯(cuò)npm ERR! path E:\workspace\vue\node_modules\js-beautify\js\bin\css-beautify.js,需要在gitHub上下載js-beautify枝缔,地址:js-beautify1.7.0地址)

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

npm run dev

如果瀏覽器打開之后布疙,沒有加載出頁面,有可能是本地的 8080 端口被占用愿卸,需要修改一下配置文件config>index.js

建議將端口號(hào)改為不常用的端口灵临。另外我還將 build 的路徑前綴修改為 ' ./ '(原本為 ' / '),是因?yàn)榇虬笃渚簦獠恳?js 和 css 文件時(shí)霎槐,如果路徑以 ' / ' 開頭毯辅,在本地是無法找到對應(yīng)文件的(服務(wù)器上沒問題)。所以如果需要在本地打開打包后的文件顿涣,就得修改文件路徑波闹。

4、打包上線

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

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

npm run build

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

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


IE瀏覽器兼容性解決方案

解決方式:安裝 "babel-polyfill" 即可揉阎。

命令:cnpm install --save-dev babel-polyfill?

在入口main.js文件引入:import 'babel-polyfill'

最后一步庄撮,在build文件夾下找到webpack.base.conf.js.

將第10行的內(nèi)容替換一下即可。

module.exports = {

entry: {

app: ["babel-polyfill", "./src/main.js"]

},

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末毙籽,一起剝皮案震驚了整個(gè)濱河市洞斯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌惧财,老刑警劉巖巡扇,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異垮衷,居然都是意外死亡厅翔,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門搀突,熙熙樓的掌柜王于貴愁眉苦臉地迎上來刀闷,“玉大人,你說我怎么就攤上這事仰迁〉榛瑁” “怎么了?”我有些...
    開封第一講書人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵徐许,是天一觀的道長施蜜。 經(jīng)常有香客問我,道長雌隅,這世上最難降的妖魔是什么翻默? 我笑而不...
    開封第一講書人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮恰起,結(jié)果婚禮上修械,老公的妹妹穿的比我還像新娘。我一直安慰自己检盼,他們只是感情好肯污,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般蹦渣。 火紅的嫁衣襯著肌膚如雪哄芜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,441評(píng)論 1 310
  • 那天剂桥,我揣著相機(jī)與錄音忠烛,去河邊找鬼。 笑死权逗,一個(gè)胖子當(dāng)著我的面吹牛美尸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播斟薇,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼师坎,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了堪滨?” 一聲冷哼從身側(cè)響起胯陋,我...
    開封第一講書人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎袱箱,沒想到半個(gè)月后遏乔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡发笔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年盟萨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片了讨。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡捻激,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出前计,到底是詐尸還是另有隱情胞谭,我是刑警寧澤,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布男杈,位于F島的核電站丈屹,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏伶棒。R本人自食惡果不足惜泉瞻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望苞冯。 院中可真熱鬧,春花似錦侧巨、人聲如沸舅锄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽皇忿。三九已至畴蹭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鳍烁,已是汗流浹背叨襟。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留幔荒,地道東北人糊闽。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像爹梁,于是被迫代替她去往敵國和親右犹。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容