隨時隨地技術實戰干貨，獲取項目源碼、學習資料，請關注源代碼社區公眾號(ydmsq666)

一、簡介

vue.js是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。更多詳細介紹請移步vue官網。

二、webstorm安裝

這里我們使用webstorm來作為IDE,WebStorm是jetbrains公司旗下一款JavaScript 開發工具，和IntelliJ IDEA同源，非常強大，關于他的下載和安裝，網上有很多教程，這里就不多說了。

三、node.js的安裝

Node.js是一個Javascript運行環境，關于node.js的更多詳細介紹參考這篇文章：

初識NodeJS，一個基于GoogleV8引擎的Javascript運行環境

新版的node安裝完成后，npm也安裝完成了，npm介紹請參考：NPM 使用介紹

四、安裝Git

參考：Git下載、安裝

做好準備工作后，就可以開始創建vue項目了

五、使用vue-cli構建vue項目

vue-cli是vue.js的腳手架，用于自動生成vue.js+webpack的項目模板。

使用步驟如下：

建立一個項目的文件夾，我的命名為MyVueProject,然后進入到這個文件夾，右鍵，選擇Git Bash Here。

輸入命令行：npm install vue-cli -g(下載全局vue-cli)

下載完成后，輸入命令行：vue init webpack myproject ,myproject 是項目名稱。然后控制臺會詢問一些問題如下：

? Project name (myproject)? 項目名稱（myproject）（確定按enter，否按N）?

? Project description (A Vue.js project)
項目描述（一vue.js項目）。（隨意輸入一段簡短介紹，用英文，不寫直接回車也行）

? Author (yourname <youremail>)
輸入作者，然后按enter,否則N

? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
? Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific H
TML) are ONLY allowed in .vue files - render functions are required elsewhere
直接翻譯如下：Vue的建立（使用箭頭鍵）>運行時+編譯器：大多數用戶推薦運行時間：約6kb輕民+ gzip，但模板（或任何Vue具體HTML）只允許在。VUE文件渲染功能是必需的其他地方。（按enter）?

? Install vue-router? (Y/n)
是否安裝路由，建議安裝。?輸入Y回車

? Use ESLint to lint your code? (Y/n)
使用ESlint語法？（Y/ N）。（使用ESLint語法，就要做好心理準備，除非你非常懂ESLint語法，要不就會處處報錯，之前不明白的時候選擇過一次，總之很煩，若想要挑戰一下，下面這個網址會給你幫助的：https://cloud.tencent.com/developer/chapter/12618 ???????建議N）?
? Set up unit tests (Y/n)?設置單元測試？（Y / N）。（選N）

? Setup e2e tests with Nightwatch? (Y/n)
Nightwatch建立端到端的測試？（Y / N）。（選N）

? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
> Yes, use NPM
? Yes, use Yarn
? No, I will handle that myself
(選擇Yes，use NPM)

然后要等待一會，安裝項目依賴

整個過程效果圖如下：

現在項目已經創建好了，可以使用命令行直接啟動

輸入命令：cd?myproject ?進入到項目文件中

輸入命令： npm install ?初始化安裝依賴
????? ?輸入命令： npm run dev ?執行

啟動好，就可以在瀏覽器輸入http://localhost:8080看到歡迎頁面，注意如果8080端口已經被占用，控制臺會使用其它端口，有提示。

六、在webStorm中運行

如果在IDE運行工程，就用webStorm打開剛剛創建的工程

?

啟動完成后，控制臺會看到網址

由于剛剛使用了8080和8081端口，這里啟動的8082端口，在瀏覽器輸入該網址，可以看到一樣的歡迎頁面。

結合webStorm構建vue.js項目就介紹到這里。

總結

以上是生活随笔為你收集整理的快速构建vue项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。