https://github.com/zzx0106/vue-template-v2

vue-temp-v2模板
https://github.com/zzx0106/vue-template-v2

Last synced: 3 months ago
JSON representation

vue-temp-v2模板

• Host: GitHub
• URL: https://github.com/zzx0106/vue-template-v2
• Owner: zzx0106
• Created: 2020-11-17T03:50:55.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-20T07:59:27.000Z (over 4 years ago)
• Last Synced: 2025-01-17T07:11:05.966Z (5 months ago)
• Language: JavaScript
• Size: 454 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue 模板 v2模板描述

### 该模板为参考模板，内容比较多，不建议直接用于正式环境，按需求摘取符合自己项目所需要的功能

vue 全家桶、pwa、预渲染+SEO 优化、sentry 错误监控、vw vh 移动端适配+兼容、权限、webpack 优化、vscode设置优化、eslint配置、tsconfig配置、项目开发风格统一化、优化各种工具类、添加可选链功能、添加typings配置 等等。

```

安装依赖

npm i

运行

npm run dev

打包

npm run build

检查打包日志

npm run build:report

输出webpack配置

npm run config

```

#### 使用脚手架生成默认模板结构

```

vue create hello-world

? Please pick a preset: (Use arrow keys)

> Manually select features 使用自定义模式

? Check the features needed for your project:

  (*) Babel

  ( ) TypeScript vue2x版本暂时不考虑，当3x版本再切换

  (*) Progressive Web App (PWA) Support 这个项目中涵盖

  (*) Router

  (*) Vuex

  (*) CSS Pre-processors

  (*) Linter / Formatter

  (*) Unit Testing  这个可选可不选 

  (*) E2E Testing   这个可选可不选

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

> Sass/SCSS

? Pick a linter / formatter config:

> ESLint with error prevention only

? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)

>(*) Lint on save


? Pick a unit testing solution:

> Jest

? Pick a E2E testing solution: (Use arrow keys)

> Cypress (Chrome only)

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)

> In dedicated config files

? Save this as a preset for future projects? (y/N) y

后面一个是选择你保存的模板名字

```

#### 使用到的插件

```

------ postcss 全套 ------

npm i postcss-flexbugs-fixes postcss-import postcss-preset-env postcss-px-to-viewport postcss-pxtorem postcss-url postcss-viewport-units postcss-write-svg cssnano cssnano-preset-advanced -D

** 介绍在postcss.config.js中

```

```

------ 其他插件 -------

npm i axios fastclick vuex vue-router -S

```

```

------ 预渲染套餐 ------

npm i vue-meta-info prerender-spa-plugin -S

** 注意 prerender-spa-plugin 会下载一个145m的包，不过速度很快十秒左右。可酌情选择

** 用于页面预渲染，单页应用seo操作

```

```

------- 打包优化 ------

npm i compression-webpack-plugin -D

** gzip压缩，减少nginx服务器压力

```

```

------- 图片压缩 ------

npm i image-webpack-loader -D

** 通过系统的压缩工具对图片进行压缩，让图片失帧率变低

```

```

------ 错误监控平台 ------

建议使用chrome浏览器打开，其他的也能打开

https://sentry.io/welcome/

用github登录

创建项目

选择Browser(vue不在Popular之列...) 选择vue

然后会让你下载依赖

npm install @sentry/browser @sentry/integrations -S

```

TODO

docker 自动化部署

jest 单元测试