一、创建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')
六、Cookie 处理,使用userCookies
安装: npm i universal-cookie@^6
引入:import { useCookies} from '@vueuse/integrations/useCookies'
如果启动项目(npm run dev)有如下错误提示:
再次安装下:npm install @vueuse/integrations
七、跨域问题
通常是后端解决(允许哪些域名、协议、url访问),前端通过设置代理尝试解决(不一定有用)
vite.config.js 中增加如下配置:
server:{
proxy:{
"/api":{
target:'http://127.0.0.1:5000',
changeOrigin:true,
rewrite:(path)=>path.replace(/^\/api/,'')
}
}
}