? ?

目錄

一、VUE

1、安裝VUE

2、創(chuàng)建項(xiàng)目

?二、Element Plus

1、在項(xiàng)目目錄中安裝 Element Plus，執(zhí)行

2、引入element

三、vscode 中運(yùn)行

1、打開項(xiàng)目文件夾

2、點(diǎn)擊debug，運(yùn)行

1）、首次lanch? chrome時(shí)

2）、lanch node.js??

3）、加入elementui 看看起作用不

最近學(xué)習(xí)針灸，突然想搭建一個(gè)針灸學(xué)習(xí)網(wǎng)站，因此，重新學(xué)習(xí)了下 VUE3、elementui-plus,如果要做的話，就用這個(gè)先搭建本地網(wǎng)站試試。

前提，安裝好了 node.js? vscode

一、VUE

參考：快速上手 | Vue.js

1、安裝VUE

npm install -g @vue/cli

卸載之前VUE版本

npm uninstall vue-cli -g

查看版本

vue -V

2、創(chuàng)建項(xiàng)目

之前可以 npm create mypro? ?//項(xiàng)目名不能有大寫字母

現(xiàn)在也可以

npm init vue@latest

可以選擇組件是否一同安裝

瀏覽器 打開?http://localhost:5173/

?二、Element Plus

1、在項(xiàng)目目錄中安裝 Element Plus，執(zhí)行

npm install element-plus --save

安裝后，目錄如下：

2、引入element

參考：

Quick Start | Element Plus

修改 src / main.ts

核心代碼

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'



...
const app = createApp(App)
app.use(ElementPlus)

示例：

import './assets/main.css'

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(ElementPlus)
app.use(createPinia())
app.use(router)

app.mount('#app')

三、vscode 中運(yùn)行

1、打開項(xiàng)目文件夾

2、點(diǎn)擊debug，運(yùn)行

1）、首次lanch? chrome時(shí)

當(dāng)選擇lanch? chrome時(shí)

出現(xiàn)?

2）、lanch node.js??

選擇run script:dev

點(diǎn)擊運(yùn)行

配置：.vscode\launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

可以將 URL 改為http://localhost:5173/

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:5173/",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

這時(shí)候，run的時(shí)候再選 Launch chrome時(shí)，就等打開正確的網(wǎng)頁了

3）、加入elementui 看看起作用不

可以修改 App.vue

<template>
  <el-container>
    <el-header>
    <img alt="Vue logo" src="@/assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <HelloWorld msg="My First VUE!" />
    </div>
  </el-header>

  <el-container> 
    <el-aside width="200px">
    <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
    </nav>
    </el-aside>
    <el-main>
      el-main
    </el-main>
  </el-container>

  </el-container>


  <!-- <RouterView /> -->
</template>

<style scoped>
.el-header{
  padding-bottom: 200px;
  background-color: var(--color-text);
}

起作用了。文章來源地址http://www.zghlxwxcb.cn/news/detail-533219.html

到了這里，關(guān)于VSCODE VUE3 element-ui plaus 環(huán)境搭建的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！