使用vue2 0建立的專案的步驟

2021-08-02 15:38:10 字數 1882 閱讀 1232

//檢查是否有node.js  npm vue

win+r   輸入cmd  輸入node -v  回車 會出現node,js的版本

輸入npm -v  回車 會出現npm的版本

輸入vue -v 回車 會出現vue的版本

2.安裝vue:

[plain]view plain

copy

npm install -g vue-cli  

//-g表示全域性安裝,vue-cli是模組,全域性安裝的模組可以在命令列直接使用  

由於npm**在國內速度非常慢,所以可以在命令後面加上**的映象

即:npm install -g vue-cli --registry=

之後,可以vue --v檢視vue是否安裝好,出現版本號即安裝成功。

3.接下來是建立專案框架

如果想放到指定的目錄下,先進入這個目錄在執行建立專案的命令

例如:           e:回車   //進入e盤                              

cd test回車   //進入e盤的test資料夾

e:\test\vue init webpack my-vue          //建立乙個基於"webpack"的專案,後面是專案名 

依次按照提示輸入,專案名、專案描述、專案作者等等,

然後一路回車  看到最後這句專案就建立好了。

to get started:  

就是告訴你接下來該做什麼,依次完成下面3行命令就可以了。進入my-vue專案-----安裝npm依賴-----執行專案

以下為此3步的詳解

cd my-vue   

在my-vue檔案下看到專案結構:

注:這是安裝了依賴以後的截圖,沒安裝依賴以前是沒有node_modules資料夾的

4.安裝專案依賴

生成了專案以後是不能直接執行的,現在很多專案都依賴許許多多的模組,需要逐一安裝依賴。

ctrl+c 停掉剛生成專案的命令,cd my-vue 進入專案跟目錄, 用命令npm install 安裝

若安裝緩慢同樣可以使用**映象

即輸入命令:npm install --registry=

當這個命令執行完成以後會多出乙個node_modules資料夾,裡面就是專案所需的所有依賴

可以看到有很多模組,這些模組都是在package.json檔案裡定義好了的.

5.執行測試

[plain]view plain

copy

npm run dev  

出現如下紅色框框表示啟動完成,一般流覽器會自動跳轉出介面http://localhost:8080/,也可以手動開啟流覽器器輸 入位址。

瀏覽器介面截圖:

這樣專案就搭建完成了。

建立Vue專案的步驟

第一步 對於要建立專案的工作目錄,要先進性管理,命令 npm init y 第二步 初始化webpack 包,命令 vue init webpack 自定義名稱 第三步 在components 檔案中建立元件。在建立元件時要對頁面布局進行乙個規劃,可以分為頭部,底部,內容三部分。在各個部分定義元件 ...

vue2 0使用 1 建立新專案

vue版本 2.2.2 1.全域性安裝vue命令列工具 npm install g vue cli 2.建立乙個基於webpack模板的新專案 vue init webpack my project 注 跟 npm init 類似,輸入一系列專案描述與配置,可以不用配置eslint和單元測試框架。3...

使用VUE2 0構建webpack專案

1 vue構建webpack專案需要依賴於node 和npm 需要先安裝。輸入node v回車 會出現node版本號 輸入npm v回車 會出現npm版本號 2 安裝vue npm install g vue cli g表示全域性安裝,vue cli是模組 或者使用 映象 npm install r...