windows下使用IDEA創(chuàng)建VUE項目

1.環(huán)境搭建

1.1檢測是否安裝好nodejs和npm

檢測命令

node -v

npm -v

如果沒有安裝需要先安裝

nodejs的下載路徑:https://nodejs.org/en/download/

在Windows上安裝時務(wù)必選擇全部組件信柿,包括勾選Add to Path贝奇。

安裝完成后萍桌,在Windows環(huán)境下,請打開命令提示符最盅,

idea cmd窗口

然后輸入node -v,如果安裝正常外盯,你應(yīng)該看到 ?版本號 輸出:

檢查nodejs是否安裝成功

npm是Node.js的包管理工具(package manager)虹钮,Nodejs的安裝程序默認安裝npm,在命令提示符或者終端輸入npm -v而姐,可以看到類似以下的輸出:

檢查npm

在cmd中直接使用npm來安裝的一些工具的話會比較慢腊凶,所以我們使用淘寶的npm鏡像:?

輸入npm i -g cnpm --registry=https://registry.npm.taobao.org,即可安裝npm鏡像拴念,以后再用到npm的地方直接用cnpm來代替就好了 钧萍,如果權(quán)限不夠,請使用管理員運行命令提示符

安裝淘寶npm鏡像

1.2安裝vue-cli政鼠,vue腳手架

使用如下命令

cnpm i -g vue-cli

安裝vue-cli

測試是否安裝成功:

vue -V

檢查vue是否安裝成功

2.項目安裝和創(chuàng)建

2.1安裝項目

首先進入工作目錄(如果不在工作目錄)风瘦,使用cd 命令

進入工作目錄

使用腳手架安裝項目:

vue init webpack first_vue?

控制臺顯示:

提示目錄已存在,是否繼續(xù):Y

Project name(工程名):回車

Project description(工程介紹):回車

Author:作者名

Vue build(是否安裝編譯器):回車

Install vue-router(是否安裝Vue路由):回車

Use ESLint to lint your code(是否使用ESLint檢查代碼公般,我們使用idea即可):n

Set up unit tests(安裝測試工具):n

Setup e2e tests with Nightwatch(測試相關(guān)):n

Should we run `npm install` for you after the project has been created? (recommended):選擇:No, I will handle that myself

2.1初始化項目

進入項目目錄

cd firstVue

初始化項目

cnpm i

項目目錄結(jié)構(gòu)

運行項目

cnpm run dev

瀏覽器打開:localhost:8080万搔,即可打開vue項目

Ctrl+C退出運行

2.3 配置idea

File - Settings - Languages&Frameworks - JavaScript:修改JavaScript language version為ECMAScript 6,確認

File - Settings - Plugins:搜索vue官帘,安裝Vue.js

Run - Edit Configurations...:點擊加號瞬雹,選擇npm,Name為Run遏佣,package.json選擇你工程中的package.json拐辽,Command為run霹菊,Scripts為dev,然后就可以直接在idea中運行了

繼續(xù)點擊加號遵岩,選擇npm伏蚊,Name為Build,package.json選擇你工程中的package.json膛虫,Command為run草姻,Scripts為build,然后就可以直接在idea中打包了。

2.4 安裝使用stylus(是一種健壯的css)

cnpm install --save-dev stylus stylus-loader

stylus安裝完畢的效果
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末稍刀,一起剝皮案震驚了整個濱河市撩独,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌账月,老刑警劉巖综膀,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異局齿,居然都是意外死亡剧劝,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門抓歼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來讥此,“玉大人,你說我怎么就攤上這事谣妻√言” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵蹋半,是天一觀的道長他巨。 經(jīng)常有香客問我,道長湃窍,這世上最難降的妖魔是什么闻蛀? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮您市,結(jié)果婚禮上觉痛,老公的妹妹穿的比我還像新娘。我一直安慰自己茵休,他們只是感情好薪棒,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著榕莺,像睡著了一般俐芯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上钉鸯,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天吧史,我揣著相機與錄音,去河邊找鬼唠雕。 笑死贸营,一個胖子當著我的面吹牛吨述,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播钞脂,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼揣云,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了冰啃?” 一聲冷哼從身側(cè)響起邓夕,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎阎毅,沒想到半個月后焚刚,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡净薛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年汪榔,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肃拜。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡痴腌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出燃领,到底是詐尸還是另有隱情士聪,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布猛蔽,位于F島的核電站剥悟,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏曼库。R本人自食惡果不足惜区岗,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望毁枯。 院中可真熱鬧慈缔,春花似錦、人聲如沸种玛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赂韵。三九已至娱节,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間祭示,已是汗流浹背肄满。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人稠歉。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓讥电,卻偏偏與公主長得像,于是被迫代替她去往敵國和親轧抗。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355

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