在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就是入口。
小插曲:(如果出現以下情況再執行,沒有出現不用執行此處)
【(1)在執行 vue init webpack myvue 的時候,總是報出下圖的錯誤,我反復的嘗試,最終發現原來是要更改一下執行策略,
解決辦法: 輸入下面的指令:set-ExecutionPolicy RemoteSigned,一定要輸入【Y】啊,否則不起作用
這時候你在 輸入vue -V 就顯示版本號了,說明成功了!!
(2)在執行 vue init webpack myvue 的時候,如果總是報出以下錯誤:
解決辦法:npm install -g @vue/cli-init
】
5.接着運行項目,先cd到項目文件夾,cd myvue,然后輸入以下指令
npm run dev
成功之后,接着在瀏覽器里輸入:http://localhost:8080,看到如下畫面就是成功了。
6.項目打包發布上線
輸入命令:
npm run build
完成之后,項目文件夾中會出現一個dist文件夾,里面就是打包之后的內容,直接部署就好了。