Giter VIP home page Giter VIP logo

vite's Introduction

基于 vite+vue3+mock的web端框架

命令介绍

npm run dev     -----  运行dev环境
npm run test  -----  运行test 环境
npm run pre -----  运行pre 环境
npm run ga  -----  运行ga 环境
npm run mock  -----  运行mock数据的环境
npm run build ----- 打包生产代码
npm run build:mock ----- 打包生产代码带mock的
npm run serve ----- 运行生产代码

开发方式

1.在views里面创建vue的页面 
2.在routes里面创建对应的路由

目录说明

├── config  vite的配置文件
│   ├── env  vite运行下的配置文件夹
│   └── viteConfig vite配置
│   │   ├── plugins     plugins配置文件夹
│   │   │   ├── configClientEnvPlugin 客户端环境变量初始化
│   │   │   ├── configCompressPlugin 使用 gzip 或者 brotli 来压缩资源
│   │   │   ├── configEslintPlugin vite 配置 eslint
│   │   │   ├── configHtmlPlugin 针对 index.html,提供压缩和基于 ejs 模板功能
│   │   │   ├── configLegacyPlugin  js的兼容性处理
│   │   │   ├── configMockPlugin Mock处理
│   │   │   ├── configStyleImportPlugin element vant  组件注入处理
│   │   │   ├── configSvgIconsPlugin   svg 处理
│   │   │   └── plugins.less vite.config.ts  中的 plugins 配置入口
│   │   └── proxy.ts   代理配置
├── dist  生产代码文件夹
├── mock  mock文件(带有"_"开头的文件不会注入   请求地址必须是哦那个src/services/RequestPathName.ts里面的地址)
│   ├── demo  mock示例
│   ├── _createProductionServer.ts  mock注入初始化
│   └── _util.ts 基础模型
├── public  静态文件夹
├── src
│   ├── common 公共部分
│   │   ├── config 针对客户端的环境配置文件夹
│   │   ├── utils 通用文件夹
│   │   │   ├── libs 插件的文件夹(默认注入了element和vant)
│   │   │   └── index.less 全局注入的样式
│   ├── components 组件文件夹 (文件夹名为组件名---只有文件夹下的index.ts的default为对应的组件方法)
│   │   ├── SvgIcon    svg组件 
│   │   ├── HelloWorlds    组件示例 
│   │   │   └── index.ts   组件实现
│   │   └── HelloWorld.vue     可以删除
│   ├── layout 布局文件夹
│   │   ├── components 布局的组件文件夹
│   │   └── index.ts 布局页示例
│   ├── router 路由
│   ├── services api请求文件夹
│   │   ├── http axios求请求插件
│   │   ├── randomDataService 请求示例
│   │   ├── https 请求单例初始化
│   │   └── RequestPathName.ts 请求地址(mock和请求使用)
│   ├── store 状态管理文件夹
│   │   ├── interface 模型声明
│   │   ├── modules 状态管理实现文件夹(每新建个文件需要在interface/index 进行声明)
│   │   ├── index 状态管理初始化和注入文件夹
│   │   └── mutation-types 状态管理静态变量文件
│   ├── styles 样式文件夹
│   │   ├── plugin 插件的样式文件夹
│   │   │   └── index.less 全局注入的样式(默认注入了element和vant)
│   │   ├── public 全局样式
│   │   │   ├── common 样式变量
│   │   │   │   └── index.less 全局函数式样式(默认注入)
│   │   │   └── index.less 全局默认样式(默认注入)
│   ├── views vue页面
│   ├── App.ts
│   ├── main.ts 
│   ├── types  ts全局声明
│   │   ├── env.d.ts  env 全局配置声明文件
│   │   ├── index.d.ts  全局声明
│   │   └── window.d.ts  window的ts声明
├── .eslintignore  eslint 排除文件
├── .eslintrc.js    eslint  配置
├── prettier.config.js  prettier配置
├── postcss.config.js   postcss配置(废弃,直接在vite.config.ts中的css配置)
└── vite.config.ts vite 服务配置

备注

eslint 

#安装eslint
npm install --save-dev eslint eslint-plugin-vue

#安装prettier
npm install --save-dev prettier eslint-plugin-prettier @vue/eslint-config-prettier

#安装typescript支持
npm install --save-dev @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

vscode 首选项 -> 设置里面添加 
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "eslint.autoFixOnSave" : true,
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.