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

Environment: Ubuntu

  • 安裝 npm(Node Package Manager) :::info 要確認裝的版本是 12 or 14以上（最新版本是 17） 用 14 就好了 :::
sudo apt-get install nodejs npm

確認有裝好：

npm -v
  • 安裝 Vue-cli
npm install -g @vue/cli

確認有裝好：

vue -v

:::danger

採過的坑： 如果打

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\l
ib\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)

好像是路徑問題 :::

  • 建立新的 vue 專案
vue create <project_name>

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

 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.

:::

  • 查詢專案的vue版本
npm list vue
  • HelloWorld.vue!!!!! 千萬別刪，專案會壞掉