vite2 + vue3 + vue-router4 + vuex4 + element-plus 实战(一)-项目搭建

深碍√TFBOYSˉ_ 2021-10-01 08:50 265阅读 0赞

关于项目的搭建[官方文档][Link 1]是这样写的:

## 搭建第一个 Vite 项目 ##

> 兼容性注意  
> Vite 需要 [Node.js][] 版本 >= 12.0.0。

使用 NPM:

npm init @vitejs/app

使用 Yarn:

yarn create @vitejs/app

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
    npm init @vitejs/app my-vue-app --template vue
    
    # npm 7+, 需要额外的双横线：
    npm init @vitejs/app my-vue-app -- --template vue
    
    # yarn
    yarn create @vitejs/app my-vue-app --template vue

支持的模板预设包括：

vanilla
    vue
    vue-ts
    react
    react-ts
    preact
    preact-ts
    lit-element
    lit-element-ts
    svelte
    svelte-ts

### 创建项目 ###

npm init @vitejs/app vite-elementPlus-admin --template vue

### 修改vite.config.js配置 ###

见[vite.config.js][]

### 安装依赖 ###

cd vite-elementPlus-admin
    yarn

### 引入element-plus ###

yarn add element-plus

### 简单封装element-plus组件调用 ###

1.  src目录下新建plugins文件夹
2.  plugins文件夹下新建element.js,导入element-plus组件

import ElementPlus from 'element-plus'
    import 'element-plus/lib/theme-chalk/index.css'
    import localeZH from 'element-plus/lib/locale/lang/zh-cn'
    
    export default (app) => {
      app.use(ElementPlus, { locale: localeZH })
    }

### 使用sass ###

1.  引入sass,sass-loader

yarn add --dev sass sass-loader

1.  src目录下新建styles用于存放全局样式
2.  styles文件夹下新建index.scss

body {
      height: 100%;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    label {
      font-weight: 700;
    }
    
    html {
      height: 100%;
      box-sizing: border-box;
    }
    
    #app {
      height: 100%;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    a:focus,
    a:active {
      outline: none;
    }
    
    a,
    a:focus,
    a:hover {
      cursor: pointer;
      color: inherit;
      text-decoration: none;
    }
    
    div:focus {
      outline: none;
    }
    
    .clearfix {
      &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
      }
    }
    
    // main-container global css
    .app-container {
      padding: 20px;
    }

### 修改main.js ###

import { createApp } from "vue";
    import App from "@/App.vue";
    import installElementPlus from "@/plugins/element";
    
    import "@/styles/index.scss"
    
    const app = createApp(App);
    
    installElementPlus(app);
    
    app.mount("#app");

### 运行项目 ###

yarn dev

![6587214-51b0d53f4a3f7bc3.png][]

image.png

[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fcn.vitejs.dev%2Fguide%2F
[Node.js]: https://links.jianshu.com/go?to=https%3A%2F%2Fnodejs.org%2Fen%2F
[vite.config.js]: https://www.jianshu.com/p/caa87752a71f
[6587214-51b0d53f4a3f7bc3.png]: /images/20210804/955d74ffccb44eafad2ae64e90b5b7c4.png