No.1 可视化大屏--vite+vue3项目环境搭建

一、DataV-Vue3

1.1 安装

官网：https://datav-vue3.netlify.app/Guide/Guide.html

npm install @kjgl77/datav-vue3

 

一、vite3构建Vue3项目

1.1 什么是Vite

1.2创建vite3项目

第一步：新建一个项目的文件夹

第二步：输入cmd，回车

 第三步： npm init vite

第四步：输入项目名称

 第五步：选择框架

 

 

1.3  vue3常用依赖安装

第一步：进入项目cd keshihua-demo

第二步：安装依赖 npm install

 

1.4 运行项目

npm run dev  

 将网址复制到浏览器

 也可配置自动浏览

 

1.5  将文件夹直接拖到vscode

 

 

可以在vite.configs.js 文件中配置端口，自动浏览。

 

 

1.6  vue-router4的引入

第一步：

cnpm add vue-router -S：-S表示生产环境

cnpm add vue-router -D：-D表示开发环境

cnpm add vue-router -save

 可以看到安装成功了

 

第二步：

配置，在src中创建router 文件夹

 第三步：在router文件夹下新建文件index.js文件，在index.js 文件中写入：

 

 第四步：在main.js 文件中导入路由

 第五步：在vite.configs.js文件中配置根目录

 

代码改正：

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

// 解决 __dirname 在 ES 模块中的问题
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

// https://vite.dev/config/
export default defineConfig({
  server: {
    open: true,
    port: 8088
  },
  resolve: {
    alias: {    
      '@': path.resolve(__dirname, 'src') // 修正 __dirname
    }
  },
  plugins: [vue()],
})

　　

 1.7 引入外部文件

在APP.vue文件中可以引入。

 

可以在main.js文件中引入CSS样式