快捷導(dǎo)航

Vs-code/WebStorm中構(gòu)建Vue項(xiàng)目的實(shí)現(xiàn)步驟

更新時(shí)間：2022年08月18日 08:10:14 作者：THER1881

本文主要介紹了在Vs-code/WebStorm中構(gòu)建Vue項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、使用Vue腳手架(vue-cli)構(gòu)建Vue項(xiàng)目

1、打開cmd安裝或升級(jí)Vue腳手架

npm install -g @vue/cli

2、進(jìn)入工作目錄創(chuàng)建Vue項(xiàng)目

vue create 項(xiàng)目名稱

3、進(jìn)入項(xiàng)目目錄，啟動(dòng)項(xiàng)目

npm run serve

4、項(xiàng)目目錄用處：

4.1、public目錄：靜態(tài)資源文件夾.index.html是vue項(xiàng)目啟動(dòng)的首頁(yè)

4.2、src目錄：源碼文件夾

（1）、 assets目錄：靜態(tài)資源、測(cè)試數(shù)據(jù)

（2）、components目錄：存放Vue組件(組件擴(kuò)展名是.vue)

（3）、App.vue組件：主組件(啟動(dòng)組件)

（4）、main.js文件：核心文件。使用App.vue創(chuàng)建Vue組件,將該組件掛載到index.html的div上

二、使用Vite構(gòu)建工具構(gòu)建Vue項(xiàng)目

1、打開要?jiǎng)?chuàng)建項(xiàng)目所存放的文件位置

2、在創(chuàng)建項(xiàng)目的文件夾，打開cmd窗口

3、之后執(zhí)行下面這行命令

npm init vite-app <project-name>

4、進(jìn)入項(xiàng)目目錄安裝依賴

cd <project name>
npm install

5、啟動(dòng)項(xiàng)目

npm run dev

三、WebStorm中創(chuàng)建Vue項(xiàng)目(使用Vite構(gòu)建工具)

1、在WebStrom中安裝vite插件

2、使用vite創(chuàng)建Vue項(xiàng)目

3、配置npm運(yùn)行環(huán)境

演示：

Demo. vue:

<template>
<div id="d1">
  {{ info }}
</div>
  <div>
    {{ count }}
  </div>
  <button type="button" @click="add">Add</button>
</template>

<script>
export default {
  name: "Demo",
  data(){
    return{
      info:'鳳陽(yáng)',
      count:0
    }
  },
  methods:{
    add(){
      this.count++
    }
  }
}
</script>

<style scoped>
#d1{
  color:red;
  font-size: 25px;
}
</style>

App.vue:

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import Demo from "./components/Demo.vue";

</script>

<template>
  <div>
    <a  target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a  target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
<Demo/>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

5、Vue3中新增的特性

5.1、組合式API：setup

（1）、是一個(gè)函數(shù),可以返回對(duì)象,對(duì)象的屬性和方法可以在模板中直接使用

(2)、所有的組合API函數(shù)都在此使用, 只在初始化時(shí)執(zhí)行一次

5.2、初始化函數(shù)：ref。作用是初始化組件中使用的變量。語法是：

const 變量名 = ref(初始值)

5.3、構(gòu)建響應(yīng)式數(shù)據(jù)方法：reactive。作用是將數(shù)據(jù)打包成對(duì)象

5.4、Vue3的計(jì)算屬性：

5.5、Vue3的setup語法糖：不需要使用exports default進(jìn)行組件的默認(rèn)導(dǎo)出

<script setup>

</script>

演示：

Demo1.vue

<template>
  <div id="d1">{{ info }}</div>
  <div>{{ count }}</div>
  <h2>姓名：{{ obj.name }}</h2>
  <h2>性別：{{ obj.gender }}</h2>
  <h2>年齡：{{ obj.age }}</h2>
  <h2>家屬：{{ obj.son }}</h2>
  <button type="button" @click="add">Add</button>
</template>

<script>
import {reactive, ref} from 'vue';
export default {
  name: "Demo",
  setup(){
    const count = ref(0)
    const info = ref('鳳陽(yáng)')
    const obj = reactive({
      name: '朱元璋',
      gender: '男',
      age: 50,
      son:{
        name: '朱標(biāo)',
        age: 23
      }
    })

    function add(){
      count.value = count.value + 1
    }
    return{
      info,
      count,
      obj,
      add
    }
  }
}
</script>

<style scoped>
#d1{
  color:red;
  font-size:25px;
}
</style>

App.vue代碼段：

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import Demo1 from "./components/Demo1.vue";
</script>

<template>
  <div>
    <a  target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a  target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
<Demo1/>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

到此這篇關(guān)于Vs-code/WebStorm中構(gòu)建Vue項(xiàng)目的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)Vs-code/WebStorm構(gòu)建Vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: