vscode下搭建vue.js開發環境(基於最新的@Vue/cli 4.2.2)


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步問題,但是最終還是會因為各種問題報錯,簡直是無語了。。。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM