Vue.js開發筆記(一)——安裝與使用模闆建立項目

文章目錄

• • • 1、安裝node.js
    • • 調整目錄（很重要）
      • 安裝cnpm
    • 2、安裝vue.js、vue-cli
    • • 安裝vue.js
      • 安裝vue-cli
    • 3、使用項目模闆
    • 安裝nrm
    • 4、使用cli模闆
    • 5、問題積累
    • • 1、npm run serve報錯
      • 2、npm的淘寶鏡像靠不住
      • 3、vue-cli如果不行要先解除安裝再裝

1、安裝node.js

http://nodejs.cn/download/

全部預設安裝，一點也不需要改。

檢視

node -v
npm -v
           

調整目錄（很重要）

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
           

注意，這裡要調整，否則下一步安裝其他包都有可能出問題，例如vue

安裝cnpm

安裝cnpm(可選！也可以直接npm指定國内鏡像，見本文章後面)

npm install -g cnpm --registry=https://registry.npm.taobao.org
           

安裝cnpm會有個路徑，如果一會

cnpm -v

無法起作用，就要在環境變量裡面path加入這個路徑

注意隻要加到node_data就可以了

2、安裝vue.js、vue-cli

安裝vue.js

cnpm install vue
           

注意是大寫的V

安裝vue-cli

cnpm install vue-cli -g
           

3、使用項目模闆

檢視項目模闆

vue list
           

如果以下報錯：

則需要再安裝一次

cnpm install vue-cli -g
           

然後再

vue list
           

安裝nrm

npm install nrm -g
           

檢視 清單

nrm ls
           

nrm use taobao
           

4、使用cli模闆

vue init webpack-simple myweb
or
vue init webpack myweb
           

5、問題積累

1、npm run serve報錯

打開package.json

找到裡面

按照要求輸入：

npm run dev
           

2、npm的淘寶鏡像靠不住

報錯：npm install Maximum call stack size exceeded

1、我使用npm 安裝router子產品，其實原來就安裝了，但是還是報錯（已經是淘寶鏡像了）

2、使用npm run dev也報錯，導緻我反複看代碼

3、使用cnpm 安裝router和依賴，都發現已經完整，最後用cnpm run dev正常

3、vue-cli如果不行要先解除安裝再裝

npm uninstall vue-cli -g
           

官方已經說了，需要上述先解除安裝，然後安裝：

npm install -g @vue/cli