1、安裝/升級(jí)node環(huán)境

vue-cli對(duì)于node和npm的版本是有要求的。

可以通過(guò) node -v （npm -v）查看當(dāng)前版本，通過(guò) where node （where npm）查看安裝路徑。

如果node版本不符合vue-cli的要求，那么可以在node官網(wǎng)下載穩(wěn)定版本并安裝。

安裝過(guò)程比較簡(jiǎn)單，我更新時(shí)，除了修改安裝路徑，其他都是一直Next即可。

這里要提到一點(diǎn)，更新node版本后，查看版本，會(huì)發(fā)現(xiàn)npm的版本也已經(jīng)更新了。

D:/workspace/MyProject/Jan2018>node -v && npm -v

v8.9.4

5.6.0

2、安裝vue-cli

全局安裝vue-cli，在命令行中執(zhí)行npm install -g vue-cli

你可以在cmd打開命令行工具，也可以在Intellij IDEA的Terminal處執(zhí)行。

3、Intellij IDEA準(zhǔn)備

如果你想在Intellij IDEA的Terminal中構(gòu)建vue-cli項(xiàng)目，還需要做一點(diǎn)準(zhǔn)備。如果使用cmd構(gòu)建，則跳過(guò)此步驟。

1）安裝vue.js

File -> Settings -> Plugins -> Browse respositoties...

搜索vue.js，右側(cè)提示Install（截圖時(shí)已安裝，未安裝會(huì)提示Install）。安裝成功后需要重啟IDEA。

2）File Types: HTML 添加 *.vue類型

File -> Settings -> Editor -> File Types -> HTML

點(diǎn)Registered Patterns下的+，添加 *.vue

3）設(shè)置JS

File -> Settings -> Language & Frameworks -> JavaScript

選擇 ECMAScript 6 和 Prefer Strict mode

4、構(gòu)建及運(yùn)行vue-cli項(xiàng)目

在命令行工具cmd，或者Intellij IDEA的Terminal中進(jìn)入想要構(gòu)建項(xiàng)目的目錄，輸入vue init webpack project-name，回車

webpack默認(rèn)版本為2.0，若要指定1.0，需在webpack后加上#1.0，即vue init webpack#1.0 project-name

接下來(lái)會(huì)出現(xiàn)幾個(gè)提示，分別是輸入項(xiàng)目名稱、描述、作者等，按實(shí)際情況選擇即可。

？Project name ---- 項(xiàng)目名稱，init命令時(shí)也填了個(gè)project-name，如果無(wú)需更改，直接回車即可；

？Project description ---- 項(xiàng)目描述，按需填寫。無(wú)需填寫可以直接回車；

？Author ---- 作者

？Vue build ---- 構(gòu)建模式，一般默認(rèn)第一個(gè)；

？Install vue-router? ---- 是否安裝vue-router。選Y。后邊構(gòu)建項(xiàng)目會(huì)用到。

？Use ESLint to lint yout code? ---- 格式校驗(yàn)，按需；

？Set up unit tests ---- 測(cè)試相關(guān)，按需；

？Setup e2e tests with Nightwatch? ---- 測(cè)試相關(guān)，按需；

？Should we run ‘npm install' for you after the project has been created? ---- 按需，這里我選Yes, use NPM。如果選No，后續(xù)自己在目標(biāo)

目錄下執(zhí)行npm install即可。

這樣構(gòu)建出來(lái)的項(xiàng)目，可以直接運(yùn)行。進(jìn)入項(xiàng)目所在目錄，執(zhí)行npm run dev，執(zhí)行完看到以下提示：

Your application is running here: http://localhost:8080

在瀏覽器打開http://localhost:8080，看到這個(gè)頁(yè)面，接下來(lái)就可以開始開發(fā)了。

5、Intellij IDEA新建.vue格式文件

在開發(fā)的時(shí)候，會(huì)發(fā)現(xiàn)新建文件時(shí)并沒(méi)有.vue格式文件的選擇，這時(shí)我們需要做一些設(shè)置。

File -> Settings -> Editor -> File and Code Templates -> +

模板內(nèi)容可以按需。可以填也可以不填

<template>  <div> {{msg}}</div></template><style></style><script>  export default{ data () { return {msg: 'vue模板頁(yè)'} } }</script>

設(shè)置完成后，就能新建.vue格式的文件了。：）

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