目录
5.将main.js改为main.ts , index.html里的main.js改为maim.ts
1.搭建项目
使用npm
npm init vite-app projectName
cd projectName
npm install
npm run dev
使用yarn
yarn create vite-app projectName
cd projectName
yarn
yarn dev
2.安装typescript、router、axios插件
使用npm安装
npm install vue-router@next axios --save
npm install typescript --save-dev
使用yarn安装
扫描二维码关注公众号,回复:
16505860 查看本文章
yarn add vue-router@next axios
yarn add typescript --dev
3.vite.config.ts配置
在项目第一层创建vite.config.ts文件,文件配置如下:
import path from "path";
const pathResolve = (pathStr: string) => {
return path.resolve(__dirname, pathStr);
}
const config = {
base: './',//在生产中服务时的基本公共路径。@default '/'
alias: {
'/@/': pathResolve('./src'),
},
outDir: 'vite-init',//构建输出将放在其中。会在构建之前删除旧目录。@default 'dist'
minify: 'esbuild',//构建时的压缩方式
hostname: 'localhost',//本地启动的服务地址
port: '8800',//服务端口号
open: false,//启动服务时是否在浏览器打开
https: false,//是否开启https
ssr: false,//是否服务端渲染
optimizeDeps: {// 引入第三方的配置
include: ['axios']
},
// proxy: {//代理配置
// '/api': {
// target: 'http://xx.xx.xx.xx:xxxx',
// changeOrigin: true,
// ws: true,
// rewrite: (path: string) => { path.replace(/^\/api/, '') }
// }
// }
}
module.exports = config;
4.tsconfig.json配置
在项目的第一层新建tsconfig.json文件,文件配置如下:
{
"compilerOptions": {
"target": "ES5",//指定ECMAScript的目标版本:'ES3'(默认),'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020',或'ESNEXT'。
"module": "commonjs",//指定模块代码生成:'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020',或'ESNext'。
"strict": true,//是否启用所有严格的类型检查选项。
"baseUrl":"./",//用于解析非绝对模块名称的基本目录。
"paths": {
"/@/*": ["./src/*"]
},
"noImplicitAny": true, //对于隐含有'any'类型的表达式和声明引发错误。
"esModuleInterop": true, //通过为所有导入创建名称空间对象,实现CommonJS和ES模块之间的互操作性。意味着“allowSyntheticDefaultImports”。
"experimentalDecorators": true, //支持对ES7装饰器的实验性支持。
"skipLibCheck": true, //跳过声明文件的类型检查。
"forceConsistentCasingInFileNames": true //禁止对同一文件使用大小写不一致的引用。
}
}
5.将main.js改为main.ts , index.html里的main.js改为maim.ts
6.解决main.ts中引入App.vue报错问题
报错如下:
解决方法:
在src目录下新建.d.ts文件,文件名可随意,例如:shim.d.ts
.d.ts文件内容如下:
declare module "*.vue" {
import { Component } from "vue";
const component : Component;
export default component;
}