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

Vue3+Element?Plus使用svg加載iconfont的處理方法
這篇文章主要介紹了Vue3+Element?Plus使用svg加載iconfont的解決方案,本文詳細(xì)介紹了如何在Element?Plus中使用iconfont，簡(jiǎn)單的說就是要將其封裝成SVG，并且支持動(dòng)態(tài)修改顏色，需要的朋友可以參考下
2022-08-08
vue+element實(shí)現(xiàn)錨點(diǎn)鏈接方式
這篇文章主要介紹了vue+element實(shí)現(xiàn)錨點(diǎn)鏈接方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue動(dòng)態(tài)子組件的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了vue動(dòng)態(tài)子組件的兩種實(shí)現(xiàn)方式,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
vue項(xiàng)目中如何將數(shù)據(jù)導(dǎo)出為word文檔
這篇文章主要介紹了vue項(xiàng)目中如何將數(shù)據(jù)導(dǎo)出為word文檔問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-03-03
淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項(xiàng)目時(shí)踩到了vue-router傳參的坑（jquery和params），所以決定總結(jié)一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧
2018-08-08
vue2中使用less簡(jiǎn)易教程
這篇文章主要介紹了vue2中使用less簡(jiǎn)易教程，由于不需要手動(dòng)配置webpack，所以vue中使用less是非常簡(jiǎn)單的，只需要安裝less，less-loadder就ok了
2018-03-03
8個(gè)非常實(shí)用的Vue自定義指令
這篇文章主要介紹了8個(gè)非常實(shí)用的Vue自定義指令，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
vue 詳情跳轉(zhuǎn)至列表頁(yè)實(shí)現(xiàn)列表頁(yè)緩存
這篇文章主要介紹了vue 詳情跳轉(zhuǎn)至列表頁(yè)實(shí)現(xiàn)列表頁(yè)緩存，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue實(shí)現(xiàn)多條件篩選超簡(jiǎn)潔代碼
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)多條件篩選的相關(guān)資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進(jìn)行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下
2023-09-09
如何利用vue實(shí)現(xiàn)css過渡和動(dòng)畫
過渡Vue在插入、更新或者移除 DOM 時(shí),提供多種不同方式的應(yīng)用過渡效果這篇文章主要給大家介紹了關(guān)于如何利用vue實(shí)現(xiàn)css過渡和動(dòng)畫的相關(guān)資料,需要的朋友可以參考下
2021-11-11