npm install -g typescript // 装好typescript，查看版本号用 tsc -v
npm init @vitejs/app 项目名
vue
vue-ts
cd 项目名
npm install
npm run dev基础配置好了，安装各路依赖
npm i @vitejs/plugin-vue //必要的 支持基于 VueJS 的项目的开发
npm install axios // 网络请求模块
npm install vue-router@next // 路由 @next 最新稳定版
npm install vuex@next // vuex
npm install sass node-sass sass-loader style-loader // sass
npm install element-plus --dev //elemenui plus+
按需加载操作：首先，安装vite-plugin-style-import： npm install vite-plugin-style-import -D懵逼建完了…
参考1，有点过时的
参考2，比较接近自己试验的环境
完事编译器会报错，找不到__dirname，需要安装
npm install --save-dev @types/node // 别名模块
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 注意：在 ts 模块中加载 node 核心模块需要安装 node 的类型补充模块：npm i -D @types/node
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
...
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
})
因为使用了ts，还需要告诉 TS 别名的路径，否则 TS 会报错
// tsconfig.json
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
...
}别名使用示例
// js
import xxx from '@/api/user.ts'
// html
<img src="@/assets/logo.png">
// css
@import url("@/styles/index.scss");
background: url("@/assets/logo.png");跨域问题
// vite.config.ts
export default defineConfig({
server: {
proxy: {
// 字符串简写写法
'/foo': 'http://localhost:4567',
// 选项写法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
// 正则表达式写法
'^/fallback/.*': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/fallback/, '')
},
// 使用 proxy 实例
'/api2': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
configure: (proxy, options) => {
// proxy 是 'http-proxy' 的实例
}
}
}
}
})封装request.ts
vue3 +ts 安装并封装axios
参考1:vue3+typescript+axios+Element-plus进阶封装方案
创建nodejs+express 另起项目，别放一起！！！
Vue项目通过node连接MySQL数据库并实现增删改查操作的过程详解
装jschardet，装papaparse，装csv-exportor
npm install --save csv-exportor
npm install papaparse
npm install jschardetvite装完后遇到的7788的坑
vue3写函数写变量就是神经病啊，写nm，为了简单而更复杂，做前端死路一条。直想用2.x的语法在3.x的项目里拉屎拉尿 (2022年3月)
打包不了
装完各种组件库后，写了七八个页面，运行npm run build，报了一个错，说什么node_moudules里面vscode-jsonrpc、vscode-languageservices等等包的语法有错误，改nm这能报错，后面想想是不是node版本太低了，配置的node版本是v12.6.0，用nvm升级最新的node，查了一下是v16.x.x后，果然过去了。
然鹅，过是过去了，原来报一个错，现在npm run build后报800个错，创建项目的时候用的vue-ts，默认创建vue的项目，各种ts语法错误，看了一下package.json
"scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "serve": "vite preview" },网上说build只要vite build就行，删了前面7788的vue-tsc --noEmit &&,删完正常能打包了
在本地运行dlist文件夹里的内容，得丢服务端环境，完美进去
本地第一次dlist的速度有点慢，加载5秒才出来，还是问题
看了一下dlist文件夹里的assets文件夹，按大小排序，vendor.xxx.js900多kb，index.xxxx.css399kb，其他的都是几kb，几百字节，其他的问题不大，可以把elementplus、vue、vuex、router、axios这些上cdn，自己服务器好的话，不上cdn也无所谓