测试平台——前端框架

一、创建vue项目

npm init vite@latest web_class

复制代码
wyl@WYLdeMacBook-Air testplatform % npm init vite@latest web_class   
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /Users/wyl/workspace/testplatform/web_class...

Done. Now run:

  cd web_class
  npm install
  npm run dev

wyl@WYLdeMacBook-Air testplatform % 

二、安装插件

三、打开项目

文件-打开文件夹,选择项目根目录(web_class目录)

四、运行

终端-新建终端

输入 npm run dev,提示:sh: vite: command not found

复制代码
wyl@WYLdeMacBook-Air web_class % npm run dev

> web_class@0.0.0 dev
> vite

sh: vite: command not found
wyl@WYLdeMacBook-Air web_class %

输入 npm i ,安装项目需要的包,卡住不执行了

复制代码
wyl@WYLdeMacBook-Air web_class % npm i
(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠧ idealTree:web_class: sill idealTree buildDeps

清除缓存,设置镜像源

复制代码
wyl@WYLdeMacBook-Air web_class % npm cache verify
Cache verified and compressed (~/.npm/_cacache)
Content verified: 5 (11813355 bytes)
Index entries: 5
Finished in 0.024s
wyl@WYLdeMacBook-Air web_class % npm config set registry https://registry.npmmirror.com

wyl@WYLdeMacBook-Air web_class % npm config get registry

https://registry.npmmirror.com
wyl@WYLdeMacBook-Air web_class % 

重新安装包,运行

复制代码
wyl@WYLdeMacBook-Air web_class % npm i

added 28 packages in 43s
wyl@WYLdeMacBook-Air web_class % npm run  dev

> web_class@0.0.0 dev
> vite


  VITE v5.1.6  ready in 894 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
15:01:08 [vite] hmr update /src/App.vue
15:01:23 [vite] hmr update /src/App.vue (x2)

浏览器打开http://localhost:5173/ ,访问页面

五、引入element

element 官网:快速开始 | Element Plus

安装:npm install element-plus --save

引入包:

import ElementPlus from 'element-plus'

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

复制代码
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')
相关推荐
小菜全9 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
资深前端之路9 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
阳光阴郁大boy14 小时前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全14 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
光影少年18 小时前
react16到react19更新及底层实现是什么以及区别
前端·react.js·前端框架
OEC小胖胖18 小时前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js
EndingCoder1 天前
打包应用:使用 Electron Forge
前端·javascript·性能优化·electron·前端框架·打包·electron forge
学习3人组2 天前
React JSX 语法讲解
前端·react.js·前端框架
EndingCoder2 天前
Electron 安全性最佳实践:防范常见漏洞
前端·javascript·electron·前端框架·node.js·桌面端
lypzcgf2 天前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台