Vscode如何創(chuàng)建vue項(xiàng)目

更新時(shí)間：2025年04月18日 14:06:37 作者：大廠夢

這篇文章主要介紹了Vscode如何創(chuàng)建vue項(xiàng)目問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(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 版本號

{
  "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)文章

一步步教你用Vue.js創(chuàng)建一個(gè)組件(附代碼示例)
組件(Component)是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于如何一步步用Vue.js創(chuàng)建一個(gè)組件的相關(guān)資料,需要的朋友可以參考下
2022-12-12
vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載示例
這篇文章主要為大家介紹了vue中多個(gè)文件下載實(shí)現(xiàn)打包壓縮下載的發(fā)發(fā)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
uniapp微信小程序webview和h5數(shù)據(jù)通信代碼示例
這篇文章主要介紹了uniapp微信小程序webview和h5數(shù)據(jù)通信的相關(guān)資料,文章還列出了項(xiàng)目的結(jié)構(gòu),包括微信小程序和h5端的主要文件和組件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
vue在IIS服務(wù)器部署后路由無法跳轉(zhuǎn)
在IIS服務(wù)器上部署Vue項(xiàng)目時(shí),可能會遇到路由無法正常跳轉(zhuǎn)的問題,解決方法有兩種,下面就來具體介紹一下解決方法,感興趣的可以了解一下
2024-10-10
Vue中訪問指定鏈接并解析頁面內(nèi)容的完整指南
在現(xiàn)代Web開發(fā)中,經(jīng)常需要從其他網(wǎng)頁獲取并解析內(nèi)容,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)這一功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-03-03
深入了解vue-router原理并實(shí)現(xiàn)一個(gè)小demo
這篇文章主要為大家詳細(xì)介紹了vue-router原理并實(shí)現(xiàn)一個(gè)小demo，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
Vue+Openlayers實(shí)現(xiàn)實(shí)時(shí)坐標(biāo)點(diǎn)展示
這篇文章主要為大家詳細(xì)介紹了Vue+Openlayers實(shí)現(xiàn)實(shí)時(shí)坐標(biāo)點(diǎn)展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue項(xiàng)目與后端接口如何部署到同一域名
這篇文章主要介紹了vue項(xiàng)目與后端接口如何部署到同一域名的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-06-06
Vue 通過公共字段,拼接兩個(gè)對象數(shù)組的實(shí)例
今天小編就為大家分享一篇Vue 通過公共字段,拼接兩個(gè)對象數(shù)組的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue中的install方法使用
這篇文章主要介紹了vue中的install方法使用,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03