Vscode如何創(chuàng)建vue項(xiàng)目
更新時(shí)間：2025年04月18日 14:06:37 作者：大廠夢(mèng)
這篇文章主要介紹了Vscode如何創(chuàng)建vue項(xiàng)目問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vscode創(chuàng)建vue項(xiàng)目
VsCode 和常規(guī)的開發(fā)軟件不同，我們首先需要自己創(chuàng)建一個(gè)文件夾，然后在VsCode將這個(gè)文件夾設(shè)定為工作區(qū)域
文件 =》 將文件夾添加到工作區(qū)
完成后是這個(gè)樣子
因?yàn)槲乙淮涡蕴砑恿?個(gè)文件夾
打開后肯定是什么都沒有的，然后我們需要打開，VsCode 終端
這里創(chuàng)建終端的時(shí)候
我們需要選擇給哪一個(gè)工作空間創(chuàng)建空間，根據(jù)你自己的工作空間來
我這里的工作空間文件夾選擇的是vue2.0
接下來輸入以下命令
初始化vue
npm init -y
修改版本 package.json 里面的 vue 版本號(hào)
{
"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>展示結(jié)果
注意：
如果使用npm install vue 下載的文件，沒有vue.js 文件，百分之80 就是vue的版本問題
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue cli使用絕對(duì)路徑引用圖片問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起看看吧。2017-12-12
本篇文章主要介紹了vue過渡和animate.css結(jié)合使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于vuex模塊獲取數(shù)據(jù)及方法的相關(guān)資料,需要的朋友可以參考下2023-03-03
如何使用 Deepseek 寫的uniapp油耗計(jì)算器
這篇文章主要介紹了如何使用 Deepseek 寫的uniapp油耗計(jì)算器,下面是一個(gè)基于 Uniapp 的油耗計(jì)算器實(shí)現(xiàn),包含 Vue 組件和頁(yè)面代碼,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了代碼詳解Vuejs響應(yīng)式原理的基礎(chǔ)知識(shí)，有興趣的朋友們參考學(xué)習(xí)下吧。2017-12-12
Vue3兼容大部分Vue2的特性，用Vue2代碼開發(fā)Vue3都可以，性能上面打包大小減少 41%，初次渲染快 55%，更新快 133%，內(nèi)存使用減少 54%,本篇文章主要介紹Vue3的7種種組件通信,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
vue2.x 對(duì)象劫持的原理實(shí)現(xiàn)
這篇文章主要介紹了vue2.x 對(duì)象劫持的原理實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了淺談Vue 數(shù)據(jù)響應(yīng)式原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理
這篇文章主要為大家詳細(xì)介紹了Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析，技術(shù)點(diǎn)較多，所以篇幅較長(zhǎng)，認(rèn)真閱覽的你一定會(huì)學(xué)到很多知識(shí)，需要的朋友可以參考下2022-09-09