歡迎您光臨本站 註冊首頁

VSCode搭建Vue項目的方法

←手機掃碼閱讀     retouched @ 2020-04-30 , reply:0

在vscode上搭建一個vue項目---初學總結。

1.假設Vscode、nodejs等已經安裝好了。

2.全局安裝vue-cli,vue-cli可以幫助我們快速構建Vue項目。

安裝命令:

npm install -g vue-cli

打開VScode的終端,調出命令輸入框。點擊終端-新建終端,輸入上述命令,回車,等待安裝完成。

3.安裝webpack,它是打包js的工具

安裝命令:

npm install -g webpack

安裝方法同上。

4.安裝完成之後就可以開始創建vue項目,首先創建一個文件夾用來存放你的項目,用vscode打開對應的文件夾,並在終端cd到對應的文件夾。比如我的文件夾就是myvue

創建項目命令,輸入回車:

vue init webpack myvue

其中myvue就是項目名稱,根據喜好自己取。

接著會出現一些配置項,可以根據需要配置,也可以默認,直接按回車。

然後繼續等待安裝依賴項。完成之後,一個基本的 vue項目就搭建完了。完成之後的vscode左邊可以看到如下目錄,其中main.js就是入口。

5.接著運行項目,先cd到項目文件夾,cd myvue,然後輸入以下指令

npm run dev

成功之後,接著在瀏覽器裡輸入:http://localhost:8080,看到如下畫面就是成功了。

6.項目打包發佈上線

輸入命令:

npm run build

完成之後,項目文件夾中會出現一個dist文件夾,裡面就是打包之後的內容,直接部署就好了。


[retouched ] VSCode搭建Vue項目的方法已經有439次圍觀

http://coctec.com/docs/vue-js/show-post-232314.html