vue3.0+vite+ts+scss项目搭建
1.使用vite搭建Vue3.0
npm install -g create-vite-app
create-vite-app vue3-vite
cd vue3-vite
npm install
npm run dev
# 或者使用yarn（首选yarn）
yarn add -g create-vite-app
yarn create vite-app
2.安装依赖
yarn
3.启动项目
yarn dev
或
npx vite
4.引入typescript
yarn add typescript -D
5.初始化tsconfig.json,执行下面命令，生成tsconfig.json文件
npx tsc --init
6.将main.js修改为main.ts,同时将index.html里面的引用也修改为main.ts
然后在script 里添加 lang=“ts”
7.修改完之后，重启就可以访问项目了。虽然这样配置是可以了，但是打开main.ts会发现import App from App.vue会报错:Cannot find module './App.vue' or its corresponding type declarations.,这是因为现在ts还没有识别vue文件，需要进行下面的配置:
在项目根目录添加shim.d.ts文件，然后添加代码段
declare module "*.vue" {
import { Component } from "vue";
const component: Component;
export default component;
}
8.安装sass, sass-loader, node-sass
npm install sass --save-dev
npm install sass-loader --save-dev
npm install node-sass --save-dev使用：
.home {
width: 100%;
height: 100%;
background:#fff;
p {
font-size: 16px;
color: red;
}
}9.安装vue-router，可以使用vue-router4.0
yarn add [email protected]
或
npm install vue-router -S配置vue-router
在项目src目录下面新建router目录，然后添加index.ts文件，在文件中添加以下内容
import {createRouter, createWebHashHistory} from 'vue-router'
// 在 Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
// 路由地址
routes: []
})
或者使用
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array = []
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
10.也可以加入vuex
安装vuex
npm install vuex -S在sr目录下面创建store文件夹，创建文件index.ts,这里就先不写了内容了
router和store如下图：
然后main.ts引入
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'
import vuex from './store/index'
const app = createApp(App);
app.use(router)
app.use(vuex)
app.mount('#app')
最后，项目就可以启动项目了，比较简易的项目搭建，还可以添加其他，如，axios等等。
11. 如果要抽离Vue中的js, css，可以建各自文件如下图：
抽离css,引入方式如下：
抽离js，引入方式如下：