VUE框架基于Vite的Vue3搭建项目的脚手架------VUE框架

旧约Alatus

已于 2024-02-03 17:24:52 修改

阅读量838

点赞数 24

分类专栏：前端 # VUE框架文章标签： vue.js 前端 javascript ecmascript 前端框架 vue html

于 2024-02-02 15:52:13 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/135993536

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

  data:
    redis:
      lettuce:
        cluster:
          refresh:
            adaptive: true
            period: 2000
        pool:
          max-idle: 8
          min-idle: 0
          max-wait: -1ms
          max-active: 8
      password: abc123
      database: 0
      cluster:
        nodes: 192.168.189.128:6381,192.168.189.128:6382,192.168.189.130:6383,192.168.189.130:6384,192.168.189.129:6385,192.168.189.129:6386
        max-redirects: 3
      timeout: 5000
data:
redis:
lettuce:
cluster:
refresh:
adaptive: true
period: 2000
pool:
max-idle: 8
min-idle: 0
max-wait: -1ms
max-active: 8
password: abc123
database: 0
cluster:
nodes: 192.168.189.128:6381,192.168.189.128:6382,192.168.189.130:6383,192.168.189.130:6384,192.168.189.129:6385,192.168.189.129:6386
max-redirects: 3
timeout: 5000

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host:'0.0.0.0',//IP地址
    port:8080,//设置服务端口号
    open:false//服务启动需不需要打开浏览器
  }
})
import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [vue()],

server:{

host:'0.0.0.0',//IP地址

port:8080,//设置服务端口号

open:false//服务启动需不需要打开浏览器

}

})

{
  "name": "netcrm-front",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.5.3",
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "vite": "^5.0.8"
  }
}
{

"name": "netcrm-front",

"private": true,

"version": "0.0.0",

"type": "module",

"scripts": {

"dev": "vite",

"build": "vite build",

"preview": "vite preview"

},

"dependencies": {

"element-plus": "^2.5.3",

"vue": "^3.3.11"

},

"devDependencies": {

"@vitejs/plugin-vue": "^4.5.2",

"vite": "^5.0.8"

}

}

<template>
    <h1>啊哈哈哈,我又回来了</h1>
    <h1>{{ i }}</h1>
    <button @click="add">按一下</button>
</template>

<script>
import { ref } from 'vue';
export default {
    name : "App",
    setup(){
        let i = ref(10);
        function add(){
            this.i++;
        }
        return {i,add}
    }
}
</script>

<style>

</style>
<template>

<h1>啊哈哈哈,我又回来了</h1>

<h1>{{ i }}</h1>

<button @click="add">按一下</button>

</template>

<script>

import { ref } from 'vue';

export default {

name : "App",

setup(){

let i = ref(10);

function add(){

this.i++;

}

return {i,add}

}

}

</script>

<style>

</style>

// 程序入口,相当于main方法
// 这里从vue下导入了一个createApp方法\函数
import { createApp } from 'vue'
// 从Element-Plus导入该组件
import ElementPlus from 'element-plus'
// 导入了我们默认的app组件
import App from './App.vue'
import 'element-plus/dist/index.css'

// 利用上面导入的createApp函数创建一个vue应用
// 并将app挂载到这个#app这个ID下
createApp(App).use(ElementPlus).mount('#app')
// 程序入口,相当于main方法

// 这里从vue下导入了一个createApp方法\函数

import { createApp } from 'vue'

// 从Element-Plus导入该组件

import ElementPlus from 'element-plus'

// 导入了我们默认的app组件

import App from './App.vue'

import 'element-plus/dist/index.css'

// 利用上面导入的createApp函数创建一个vue应用

// 并将app挂载到这个#app这个ID下

createApp(App).use(ElementPlus).mount('#app')

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app">
      刚才所导入的app就会挂载到这里
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<link rel="icon" type="image/svg+xml" href="/vite.svg" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Vite + Vue</title>

</head>

<body>

<div id="app">

刚才所导入的app就会挂载到这里

</div>

<script type="module" src="/src/main.js"></script>

</body>

</html>