<code>http://www.lgygg.wang/lgyblog/2020/03/31/vuevue%e9%a1%b9%e7%9b%ae%e7%9a%84%e5%88%9b%e5%bb%ba%e8%bf%87%e7%a8%8b/
/<code>
1.Vue.js是什麼
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
2.搭建Vue開發環境
）到Node.js官方下載安裝包
我當前使用的node版本是v12.16.1，它自帶npm，安裝Node.js時會一起安裝，npm的作用就是對Node.js依賴的包進行管理。至於Node的安裝過程，網上已經有詳細的安裝過程，這裡就不再贅述。安裝成功後，到環境變量裡配置node。
然後可以到命令行窗口測試node命令是否可用，如下圖
由於國內訪問速度較慢，建議將 NPM 源設置為國內的鏡像，可以大幅提升安裝速度。
2）安裝webpack
如下圖，在命令行窗口執行命令“cnpm install webpack -g”,進行webpack安裝
3）安裝vue-cli
在命令行窗口執行命令“npm install vue-cli -g”
3.創建vue項目
打開命令行窗口，使用cd命令定位到你要創建vue項目的路徑，執行”vue init webpack 項目名稱”，注意項目名稱不能包含大寫，然後就會出現下圖的選項
<code>①、Project name (sanfeng1)；項目名稱（sanfeng1）。（確定按enter，否按N）
②、 Project description (A Vue.js project)；項目描述。（隨意輸入一段簡短介紹，用英文）
③、Author；作者（確定按enter）
④、Vue build (Use arrow keys)；（按enter，默認選擇即可）
⑤、Install vue-router? (Y/n)；安裝的路由？（可安可不安，以後也可以再安，根據需求選擇）
⑥、Use ESLint to lint your code? (Y/n)；使用ESlint語法？（Y/ N）。（使用ESLint語法，就要做好心理準備，除非你非常懂ESLint語法，要不就會處處報錯，建議N）
⑦、Setup unit tests with Karma + Mocha? (Y/n)；設置單元測試？（Y / N）。（選N）
⑧、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的測試？（Y / N）。（選N）
/<code>
上面的選項選完之後，它會安裝這個項目的依賴包，最後會顯示下圖的內容，則說明Vue項目創建成功了。
4.運行Vue項目
開發Vue項目的編輯器有很多，例如Vue官網上推薦的HBuilder X,由於我之前進行Weex開發，使用的是idea,所以我還是使用idea來開發Vue項目。使用idea打開上面創建的項目。如下圖
根據項目裡的README.md文檔，只需要先執行“npm install”安裝項目的依賴，然後執行“npm run dev”運行項目，如下圖
執行了“npm run dev”命令之後，最後在Terminal顯示該項目的訪問地址，則證明該項目啟動成功。
可以到瀏覽器輸入“localhost:8080”,則會顯示如下界面。
閱讀更多 颯颯秋風 的文章
