Vue3 + Vite2 + Typescript + vue-router4 + sass + vuex4 + Element-plus（最新的技术，最详细的搭建）

搭建一个 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就有了

第二步，配置路由

1. 安装路由yarn add vue-router@next(千万不要指定路由版本！会报解决不了的错误)
   

2. 新建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')
     

3. 成功:

到这里 Vue3+vite2+Typescript+vue-router就有了

第三步，配置sass

1. 安装yarn add sass sass-loader dart-sass style-loader

2. 修改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

1. 安装yarn add vuex@next

2. 配置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”,跳过仓库检查，否则报错！

1. 安装 yarn add element-plus

2. 在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')
   

3. 成功：

终于搭好了== Vue3+vite2+Typescript+vue-router+sass+element-plus 就有了
上级叫重构一个项目，前端选择的技术是Ice+icestark微前端+fusion+ts+sass，所以后面飞冰的文章慢慢写==

坑

1. 使用Element-plus，一定要修改·package.son里"build": “vue-tsc --noEmit --skipLibCheck && vite build”,跳过仓库检查！
2. 不要使用node-sass，应该是国内环境问题，使用dart-sass
3. 安装vuex和vue-router一定要@next，不要指定版本号
4. 提示的问题，no license 在 package 里面配置 “license”: “ISC”、use --host to expose 使用 yarn dev --host
5. 依赖在生成环境还是开发环境请看开头的package.json