vue 實現命令列介面 cmd命令列建立vue框架

2021-10-13 11:56:48 字數 1364 閱讀 3927

cmd命令列建立vue框架

注意:前提條件是先安裝好node.js,然後配置好環境變數。

這裡介紹兩個版本的建立;

一、配置版本1.0的vue-cli框架:

1、配置環境變數node_path:d:\s3s155\node.js\node_global\node_modules:

2、新增環境變數path:d:\s3s155\node.js\node_global:

3、開啟cmd命令臺

全域性安裝vue-cli:npm install vue -g:

4、全域性安裝vue-cli:npm install vue-cli -g:

5、輸入測試是否安裝vue-cli成功:vue - v:

6、隨便建立乙個資料夾,然後輸入命令建立專案:vue init webpack vue01:

8、回到你專案的目錄中,你會看到會有乙個vue01的目錄:

9、建立成功後,輸入cd vue01回到專案中,然後輸入npm run dev命令執行:

10、執行開發模式後:

11、瀏覽器開啟:

13、開啟package.json檔案:

14、比如執行打包模式:npm run build:

15、回到vue01目錄中,你會看到目錄中會多出乙個dist檔案,這個就是你將來要發給客戶的專案,但是匯出後的專案的路徑會有所改變,執行起來會失效:

16、點開dist檔案,用瀏覽器開啟:

17、用超級筆記本開啟index.html檔案,你會發現那些link進來的檔案的路徑多出乙個"/":

18、把「/」去掉後重新執行就成功了:

19、或者你可以改掉config檔案裡的inde.js的配置:

20、重新打包再執行:

21、再重新開啟dist檔案中的index.html檔案:

22、執行成功:

二、配置版本2.0的vue-cli框架:

1、使用vue create vue04命令建立專案:

2、回到node.js目錄look:

3、回到cmd後台命令臺,儘管按回車就行:

4、用瀏覽器執行後:

5、回到vue03專案目錄中觀察專案結構:

6、專案少了一些模組和依賴,但操作差不多,

開啟package.json檔案,執行打包模式:

7、執行開發模式:

8、vue03專案會多出dist檔案,這個就是打包出來的檔案:

9、一樣,開啟它,直接執行index.html是沒有效果,因為路徑改變了,解決辦法就是新增乙個vue.config.js檔案,改變配置:

10、然後用超級筆記本開啟,寫入**:

11、然後重新打包,再執行就成功了:

12、將inde.html拖進來執行:

13、執行成功:

git 命令列 和 cmd命令列

設定全域性使用者名稱 git config global user.name 區域性把global換成local 檢視全域性 git config global list 檢視git的狀態 git status 初始化 git into 名字 新增乙個檔案 git add readme.txt 刪除...

memcahced redis命令列cmd下的操作

一 memcahced 1 安裝 執行memcached.exe d install 把memcached加入到服務中 執行memcached.exe d uninstall 解除安裝memcached 2 啟動memcached cd d memcached 啟動 memcached.exe d ...

CMD命令列二

圖形化使用者介面 calc control mmc notepad regedit start命令也有用 dir findstr i for 忽略大小寫查詢 findstr a filename 在指定檔案中查詢內容 findstr 正規表示式 filename xcopy 類似copy 命令列選項...