前言

本篇會介紹 Vue 環境的安裝及建立!

作業系統: Ubuntu

1. 安裝 npm(Node Package Manager)

要確認裝的版本是 12 or 14以上(最新版本是 17)

sudo apt-get install nodejs npm
// 如何確認有裝好:
npm -v

2. 安裝 Vue-cli

npm install -g @vue/cli
// 如何確認有裝好:
vue -v 

採過的坑: 如果打

sudo npm install -g @vue/cli

會跳出以下的錯誤訊息,好像是路徑問題

module.js:339
    throw err;
    ^
Error: Cannot find module 'semver'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (C:\Users\admin\AppData\Roaming\npm\node_modules\npm\lib\config\defaults.js:6:14)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)

3. 建立新的 vue 專案

vue create <project_name>

之後會出現兩個網址,挑一個放到瀏覽器上就能進入專案畫面了

DONE  Compiled successfully in 7110ms                                1:45:54 PM

App running at:
- Local:   http://localhost:8080/ 
- Network: http://xxx.xx.xx.x:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

4. 查詢專案的vue版本

npm list vue
  • HelloWorld.vue!!!!! 千萬別刪,專案會壞掉