2020-02-13。
網上的那些怎么安裝vue環境的2.x就不要再看了,都過時了,現在去官網下載,按照他們的設置各種問題。接下來看下最新的安裝方法。
前四步是一樣的:
1、下載並安裝vscode
2、下載並安裝node.js(一直next即可)
安裝完成之后在終端輸入:node -v和npm -v查看是否安裝成功。npm是node.js的包管理工具。
3、這里我們可以更改node.js默認下載依賴的位置
在自己安裝的node.js文件夾中新建一個node_cache文件夾,新建一個node_global文件夾:接下來在終端輸入:
npm config set prefix "E:\nodejs\node_global"
npm config set cache "E:\nodejs\node_cache"
4、由於npm下載包一般很慢,使用npm install -g cnpm --registry=https://registry.npm.taobao.org更換為淘寶鏡像源。
會安裝在E:\nodejs\node_global下,此時需要將cnpm加入的path路徑中。完成之后輸入cnpm -v查看是否成功。
5、這里開始使用最新的命令下載vue/cli
cnpm install -g @vue/cli
在下載最后兩個依賴時可能會報錯:
此時輸入命令:npm update,再輸入
cnpm install -g @vue/cli
6、新建一個項目
vue create my-project
最后輸入
npm run serve
啟動程序。
瀏覽器中:
唉,舊版本的弄了我好久。下一篇再看怎么配置vscode了。
分割線---------------------------------------------------------------------------------------------------------------------------------------------------------------
以下是舊版本的。。。
1、下載並安裝vscode
2、下載並安裝node.js(一直next即可)
安裝完成之后在終端輸入:node -v和npm -v查看是否安裝成功。npm是node.js的包管理工具。
3、這里我們可以更改node.js默認下載包的位置
在自己安裝的node.js文件夾中新建一個node_cache文件夾,新建一個node_global文件夾:接下來在終端輸入:
npm config set prefix "E:\nodejs\node_global"
npm config set cache "E:\nodejs\node_cache"
4、由於npm下載包一般很慢,使用npm install -g cnpm --registry=https://registry.npm.taobao.org更換為淘寶鏡像源。
會安裝在E:\nodejs\node_global下,此時需要將cnpm加入的path路徑中。完成之后輸入cnpm -v查看是否成功。
5、安裝vue-cli腳手架構建工具
cnpm install -g vue-cli
6、隨便找個位置新建一個文件夾,並在該處進入到終端,輸入:
vue init webpack firstVue
這里會下載不下來,因為連接不到github.com,會報錯:ETIMEDOUT 13.250.177.223:443。我們可以離線安裝。首先去https://github.com/vuejs-templates/。下載好壓縮包,我電腦死活連不上,只好先用手機下載好,然后在傳給電腦。下載之后解壓成webpack,在C:\Users\Administrator\下新建一個.vue-templates文件夾,直接創建會不成功,在終端進入該路徑,然后輸入:md .vue-templates即可。然后將webpack文件放在該目錄下。
7、進行離線創建項目(多加一個參數)
vue init webpack firstVue --offline
然后會看到:雖然解決了上述第6步問題,但是最終還是會因為各種問題報錯,簡直是無語了。。。