1讹弯、安裝/升級node環(huán)境
vue-cli對于node和npm的版本是有要求的洞渤。
可以通過 node -v （npm -v）查看當(dāng)前版本阅嘶，通過 where node （where npm）查看安裝路徑。
如果node版本不符合vue-cli的要求载迄，那么可以在node官網(wǎng)下載穩(wěn)定版本并安裝奈懒。
安裝過程比較簡單，我更新時宪巨，除了修改安裝路徑磷杏，其他都是一直Next即可。
這里要提到一點捏卓，更新node版本后极祸，查看版本，會發(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項目冲粤，還需要做一點準(zhǔn)備美莫。如果使用cmd構(gòu)建页眯，則跳過此步驟。
1）安裝vue.js
File -> Settings ->?Plugins ->?Browse respositoties...
搜索vue.js厢呵，右側(cè)提示Install（截圖時已安裝窝撵，未安裝會提示Install）。安裝成功后需要重啟IDEA襟铭。
2）File Types: HTML 添加 *.vue類型
File -> Settings?->?Editor ->?File Types -> HTML
點Registered Patterns下的+碌奉，添加 *.vue
3）設(shè)置JS
File -> Settings?-> Language & Frameworks ->?JavaScript
選擇 ECMAScript 6 和 Prefer Strict mode
4、構(gòu)建及運行vue-cli項目
在命令行工具cmd寒砖，或者Intellij IDEA的Terminal中進入想要構(gòu)建項目的目錄赐劣，輸入vue init webpack project-name，回車
webpack默認(rèn)版本為2.0哩都，若要指定1.0隆豹，需在webpack后加上#1.0，即vue init webpack#1.0 project-name
接下來會出現(xiàn)幾個提示茅逮，分別是輸入項目名稱、描述判哥、作者等献雅，按實際情況選擇即可。
塌计？Project name ---- 項目名稱挺身，init命令時也填了個project-name，如果無需更改锌仅，直接回車即可章钾；
？Project description ---- 項目描述热芹，按需填寫贱傀。無需填寫可以直接回車；
伊脓？Author ---- 作者
府寒？Vue build ---- 構(gòu)建模式，一般默認(rèn)第一個报腔；
株搔？Install vue-router? ---- 是否安裝vue-router。選Y纯蛾。后邊構(gòu)建項目會用到纤房。
？Use ESLint to lint yout code? ---- 格式校驗翻诉，按需炮姨；
捌刮？Set up unit tests?---- 測試相關(guān)，按需剑令；
糊啡？Setup e2e tests with Nightwatch??---- 測試相關(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)建出來的項目典尾，可以直接運行役拴。進入項目所在目錄，執(zhí)行npm run dev钾埂，執(zhí)行完看到以下提示：
Your application is running here: http://localhost:8080
在瀏覽器打開http://localhost:8080河闰，看到這個頁面，接下來就可以開始開發(fā)了褥紫。
5姜性、Intellij IDEA新建.vue格式文件
在開發(fā)的時候，會發(fā)現(xiàn)新建文件時并沒有.vue格式文件的選擇髓考，這時我們需要做一些設(shè)置部念。
File -> Settings?-> Editor ->?File and Code Templates -> +
模板內(nèi)容可以按需“惫剑可以填也可以不填
<template>
? ? <div> {{msg}}</div>
</template>
<style></style>
<script>
????export default{ data () { return {msg: 'vue模板頁'} } }
</script>
設(shè)置完成后儡炼，就能新建.vue格式的文件了。：）
如果這篇文章對你有幫助查蓉，不妨點個贊再走吧~ ?^_^
