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：

7、填寫項目的具體信息，按回車就會自動幫你下載項目相關的東西：

8、回到你項目的目錄中，你會看到會有一個vue01的目錄：

9、創建成功后，輸入cd vue01回到項目中，然后輸入npm run dev命令運行：

 

10、運行開發模式后：

11、瀏覽器打開：

12、回到vue01項目中，有很多已下載的東西：

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、運行成功：