Vue構建專案基礎入門
阿新 • • 發佈：2018-11-13
首先保證已經安裝node環境（node下載地址：https://nodejs.org/zh-cn/）
1、新建目錄檔案，檢視node環境和npm環境：
[email protected] MINGW64 ~/Desktop/web20181113 (master) $ npm -v 6.4.1 [email protected] MINGW64 ~/Desktop/web20181113 (master) $ node -v v8.12.0
2、安裝npm腳手架（參考：https://cli.vuejs.org/guide/installation.html）
yarn global add @vue/cli
也可以使用 npm install -g @vue/cli ； 個人覺得使用yarn命令安裝更快。
檢查是否安裝成功
[email protected] MINGW64 ~/Desktop/web20181113 (master) $ vue --version 3.0.5
3、建立專案
vue create website
可以選擇需要安裝的外掛，專案建立成功後，收到提示：
$ cd website $ yarn serve
4、切換到專案目錄，執行專案
[email protected] MINGW64 ~/Desktop/web20181113 (master) $ cd website/
[email protected] MINGW64 ~/Desktop/web20181113/website (master) $ yarn serve yarn run v1.7.0 $ vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin DONE Compiled successfully in 4179ms16:44:02 App running at: - Local: http://localhost:8080/ - Network: http://xx.xx.xx.xx:8080/ Note that the development build is not optimized. To create a production build, run yarn build.
提示：
App running at:
- Local: http://localhost:8080/
- Network: http://xx.xx.xx.xx:8080/
5、瀏覽器輸入：http://localhost:8080/，檢視結果
執行成功。
其他：
1、檢視Vue搭建的專案目錄結構
其中package.json是專案配置資訊：
2、專案中，會常用到Vuex，Vue Router，Element UI等外掛
[email protected] MINGW64 ~/Desktop/web20181113/website (master) $ yarn add vuex
[email protected] MINGW64 ~/Desktop/web20181113/website (master) $ yarn add vue-router
[email protected] MINGW64 ~/Desktop/web20181113/website (master) $ yarn add element-ui
檢視package.json,已經成功安裝
基本搭建已經成功。
小果在安裝過程中，遇見了好多問題，還有一些報錯，這是解決了報錯之後，進行的基本搭建，歡迎各位一起探討！