搭建一个
Vue3 + Vite2 + Typescript + vue-router4 + sass + vuex4 + Element-plus
的项目遇到的坑在文章末尾
package.json:
{
"name": "my-vue-app",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit --skipLibCheck && vite build",
"serve": "vite preview"
},
"dependencies": {
"dart-sass": "^1.25.0",
"element-plus": "^1.0.2-beta.70",
"sass": "^1.37.5",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"vue": "^3.0.5",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.3.0",
"@vue/compiler-sfc": "^3.0.5",
"typescript": "^4.3.2",
"vite": "^2.4.4",
"vue-tsc": "^0.2.2"
},
"license": "ISC"
}
第一步,安装模板
yarn create vite my-vue-app --template vue-ts
成功:
到这里,Vue3+vite2+Typescript就有了
第二步,配置路由
-
安装路由
yarn add vue-router@next
(千万不要指定路由版本!会报解决不了的错误
)
-
新建router和views文件夹,然后修改文件
-
router文件夹里新建index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import Home from '../views/Home.vue' const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home }, ] const router = createRouter({ history: createWebHistory(), routes }) export default router
-
views文件夹里新建Home.vue
<template> <div> <img alt="Vue logo" src="../assets/logo.png"> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Home', components: {}, }); </script>
-
修改App.vue
<template> <router-view /> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'App', }) </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
-
修改main.ts
import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')
-
-
成功:
到这里 Vue3+vite2+Typescript+vue-router就有了
第三步,配置sass
-
安装
yarn add sass sass-loader dart-sass style-loader
-
修改views下面的Home.vue
<template> <div> <img alt="Vue logo" src="../assets/logo.png"> <div class="fa"> <div class="son"></div> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Home', components: {}, }); </script> <style scoped lang="scss"> .fa{ margin: 0 auto; height: 200px; width: 200px; background-color: pink; .son{ margin: 0 auto; height: 100px; width: 100px; background: #ccc; } } </style>
成功:
到这里 Vue3+vite2+Typescript+vue-router+sass 就有了
第四步,安装Vuex4
-
安装
yarn add vuex@next
-
配置vuex
- store下面的index.ts
import { createStore } from 'vuex' export default createStore({ state: { mmd:'vuex成功' }, mutations: { }, actions: { }, modules: { } })
- main.ts:
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' createApp(App).use(store).use(router).mount('#app')
- views下面的Home.vue
<template> <div> <img alt="Vue logo" src="../assets/logo.png"> <div class="fa"> <div class="son"> {{mmd}} </div> </div> </div> </template> <script lang="ts"> import { mapState } from 'vuex' import { defineComponent } from 'vue'; export default defineComponent({ name: 'Home', computed: { ...mapState(['mmd']) } }); </script> <style scoped lang="scss"> .fa { margin: 0 auto; height: 200px; width: 200px; background-color: pink; .son { margin: 0 auto; height: 100px; width: 100px; background: #ccc; } } </style>
成功:
到这里 Vue3+vite2+Typescript+vue-router+sass+vuex 就有了
第五步,安装Element-plus
使用Element-plus,一定要修改·package.son里"build": “vue-tsc --noEmit --skipLibCheck && vite build”,跳过仓库检查,否则报错!
-
安装
yarn add element-plus
-
在main.ts里配置
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(router).use(store).use(ElementPlus).mount('#app')
-
成功:
终于搭好了== Vue3+vite2+Typescript+vue-router+sass+element-plus 就有了
上级叫重构一个项目,前端选择的技术是Ice+icestark微前端+fusion+ts+sass,所以后面飞冰的文章慢慢写==
坑
- 使用Element-plus,一定要修改·package.son里"build": “vue-tsc --noEmit --skipLibCheck && vite build”,跳过仓库检查!
- 不要使用node-sass,应该是国内环境问题,使用dart-sass
- 安装vuex和vue-router一定要@next,不要指定版本号
- 提示的问题,no license 在 package 里面配置 “license”: “ISC”、use
--host
to expose 使用 yarn dev --host - 依赖在生成环境还是开发环境请看开头的package.json