Vscode如何創(chuàng)建vue項目
更新時間：2025年04月18日 14:06:37 作者：大廠夢
這篇文章主要介紹了Vscode如何創(chuàng)建vue項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vscode創(chuàng)建vue項目
VsCode 和常規(guī)的開發(fā)軟件不同，我們首先需要自己創(chuàng)建一個文件夾，然后在VsCode將這個文件夾設定為工作區(qū)域
文件 =》 將文件夾添加到工作區(qū)
完成后是這個樣子
因為我一次性添加了2個文件夾
打開后肯定是什么都沒有的，然后我們需要打開，VsCode 終端
這里創(chuàng)建終端的時候
我們需要選擇給哪一個工作空間創(chuàng)建空間，根據(jù)你自己的工作空間來
我這里的工作空間文件夾選擇的是vue2.0
接下來輸入以下命令
初始化vue
npm init -y
修改版本 package.json 里面的 vue 版本號
{
"name": "vue2.0",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.14"
}
}如果不修改，有可能出現(xiàn)沒有vue.js 文件的問題
npm install vue
出現(xiàn)如下json和node_modules： html 自己創(chuàng)建哈
來看看html如何引用vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{name}},歡迎你</h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
name:"小張"
}
})
</script>
</script>
</html>展示結果
注意：
如果使用npm install vue 下載的文件，沒有vue.js 文件，百分之80 就是vue的版本問題
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue3+Element?Plus使用svg加載iconfont的處理方法
這篇文章主要介紹了Vue3+Element?Plus使用svg加載iconfont的解決方案,本文詳細介紹了如何在Element?Plus中使用iconfont，簡單的說就是要將其封裝成SVG，并且支持動態(tài)修改顏色，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue+element實現(xiàn)錨點鏈接方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue動態(tài)子組件的兩種實現(xiàn)方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue項目中如何將數(shù)據(jù)導出為word文檔問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項目時踩到了vue-router傳參的坑（jquery和params），所以決定總結一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了vue2中使用less簡易教程，由于不需要手動配置webpack，所以vue中使用less是非常簡單的，只需要安裝less，less-loadder就ok了2018-03-03
這篇文章主要介紹了8個非常實用的Vue自定義指令，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue 詳情跳轉至列表頁實現(xiàn)列表頁緩存，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要給大家介紹了關于vue實現(xiàn)多條件篩選的相關資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下2023-09-09
過渡Vue在插入、更新或者移除 DOM 時,提供多種不同方式的應用過渡效果這篇文章主要給大家介紹了關于如何利用vue實現(xiàn)css過渡和動畫的相關資料,需要的朋友可以參考下2021-11-11