├── .env.dev ├── .env.prod ├── .env.test ├── .gitignore ├── babel.config.js ├── build ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js └── webpack.rules.conf.js ├── package.json ├── postcss.config.js ├── public ├── index.html └── logo.png ├── readme.md └── src ├── App.vue ├── api ├── base.js └── index.js ├── assets └── img │ ├── logo.png │ ├── qrcode.jpg │ └── test.jpg ├── filters └── index.js ├── main.js ├── plugins └── vant.js ├── router └── index.js ├── store └── index.js ├── style ├── _variables.scss └── global.scss ├── utils └── http.js └── views ├── about.vue ├── index.vue └── login.vue /.env.dev: -------------------------------------------------------------------------------- 1 | NODE_ENV = 'development' 2 | VUE_APP_BASE_API = '/api' 3 | VUE_APP_API_USER = '/user' 4 | VUE_APP_SHOWCONSOLE = true -------------------------------------------------------------------------------- /.env.prod: -------------------------------------------------------------------------------- 1 | NODE_ENV = 'production' 2 | VUE_APP_BASE_API = 'https://www.fastmock.site' 3 | VUE_APP_API_USER = 'http://www.mockhttp.cn' 4 | VUE_APP_SHOWCONSOLE = false -------------------------------------------------------------------------------- /.env.test: -------------------------------------------------------------------------------- 1 | NODE_ENV = 'production' 2 | VUE_APP_BASE_API = 'https://www.fastmock.site' 3 | VUE_APP_API_USER = 'http://www.mockhttp.cn' 4 | VUE_APP_SHOWCONSOLE = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | logs/ 2 | npm-debug.log 3 | yarn-error.log 4 | node_modules/ 5 | dist/ 6 | package-lock.json 7 | yarn.lock 8 | coverage/ 9 | .idea/ 10 | run/ 11 | .DS_Store 12 | *.sw* 13 | *.un~ 14 | typings/ 15 | .nyc_output/ 16 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | const presets = [ 2 | ["@babel/preset-env", { 3 | "useBuiltIns": 'usage', // 这里配置usage 会自动根据你使用的方法以及你配置的浏览器支持版本引入对于的方法。 4 | "corejs": "3.11.0" // 指定 corejs 版本 5 | }] 6 | ] 7 | const plugins = [ 8 | ['import', { 9 | libraryName: 'vant', 10 | libraryDirectory: 'es', 11 | style: true 12 | }, 'vant'] 13 | ] 14 | module.exports = { 15 | plugins, 16 | presets 17 | 18 | } -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const { VueLoaderPlugin } = require('vue-loader/dist/index'); 4 | // html模板 5 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 6 | const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); 7 | const rules = require("./webpack.rules.conf.js"); 8 | const envMode = process.env.envMode 9 | require('dotenv').config({ path: `.env.${envMode}` }) 10 | // 正则匹配以 VUE_APP_ 开头的 变量 11 | const prefixRE = /^VUE_APP_/ 12 | let env = {} 13 | // 只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中 14 | for (const key in process.env) { 15 | if (key == 'NODE_ENV' || key == 'BASE_URL' || prefixRE.test(key)) { 16 | env[key] = JSON.stringify(process.env[key]) 17 | } 18 | } 19 | // cdn预加载使用 20 | const externals = { 21 | vue: 'Vue', 22 | 'vue-router': 'VueRouter', 23 | vuex: 'Vuex', 24 | } 25 | 26 | const cdn = { 27 | // 开发环境 28 | dev: { 29 | css: [ 30 | ], 31 | js: [] 32 | }, 33 | // 生产环境 34 | prod: { 35 | css: [ 36 | ], 37 | js: [ 38 | 'https://lib.baomitu.com/vue/3.0.11/vue.runtime.global.prod.js', 39 | "https://lib.baomitu.com/vue-router/4.0.6/vue-router.global.prod.min.js", 40 | "https://lib.baomitu.com/vuex/4.0.0/vuex.global.prod.min.js" 41 | ] 42 | } 43 | } 44 | module.exports = function (prodMode) { 45 | return { 46 | stats: "errors-only", 47 | entry: path.resolve(__dirname, '../src/main.js'), // 入口 48 | resolve: { 49 | alias: { 50 | "@": path.resolve(__dirname, "../src"), 51 | assets: path.resolve(__dirname, '../src/assets/'), 52 | img: path.resolve(__dirname, '../src/assets/img'), 53 | utils: path.resolve(__dirname, '../src/utils'), 54 | api: path.resolve(__dirname, '../src/api'), 55 | }, 56 | }, 57 | // webpack 的性能提示 58 | performance: { 59 | //入口起点的最大体积 60 | maxEntrypointSize: 50000000, 61 | //生成文件的最大体积 62 | maxAssetSize: 30000000, 63 | }, 64 | // 将外部变量或者模块加载进来 65 | externals: prodMode ? externals : {}, 66 | module: { 67 | rules: rules(prodMode) 68 | }, 69 | plugins: [ 70 | new webpack.DefinePlugin({ // 定义环境和变量 71 | 'process.env': { 72 | ...env 73 | } 74 | }), 75 | new FriendlyErrorsWebpackPlugin(), 76 | new HtmlWebpackPlugin({ 77 | template: path.resolve(__dirname, '../public/index.html'), 78 | filename: 'index.html', 79 | title: 'webpack5+vue3', 80 | minify: { 81 | html5: true, // 根据HTML5规范解析输入 82 | collapseWhitespace: true, // 折叠空白区域 83 | preserveLineBreaks: false, 84 | minifyCSS: true, // 压缩文内css 85 | minifyJS: true, // 压缩文内js 86 | removeComments: false // 移除注释 87 | }, 88 | files: prodMode ? cdn.prod : cdn.dev 89 | }), 90 | new VueLoaderPlugin(), //new一个实例 91 | ], 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 2 | const path = require('path'); 3 | const { merge } = require("webpack-merge"); 4 | const webpackConfigBase = require('./webpack.base.conf'); 5 | let webpackConfigDev = { 6 | mode:'development', 7 | devtool: 'eval-cheap-module-source-map', 8 | module: { 9 | }, 10 | plugins: [ 11 | 12 | ], 13 | devServer: { // webpack-dev-server 会从 output.path 中定义的目录为服务提供 bundle 文件，即，文件将可以通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename] 进行访问。 14 | open: false, // 启动服务后是否打开浏览器 15 | host: '127.0.0.1', 16 | port: 8008, // 服务端口 17 | https: false, 18 | hot:true, 19 | historyApiFallback: true, 20 | // 设置代理，用来解决本地开发跨域问题，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串 21 | proxy: { 22 | '/api': { 23 | secure: false, 24 | changeOrigin: true, 25 | target: 'https://www.fastmock.site/', 26 | pathRewrite: { '^/api': '' }, 27 | }, 28 | '/user': { 29 | secure: false, 30 | changeOrigin: true, 31 | target: 'http://www.mockhttp.cn/', 32 | pathRewrite: { '^/user': '' }, 33 | }, 34 | } 35 | } 36 | 37 | } 38 | 39 | module.exports = merge(webpackConfigBase(false), webpackConfigDev); -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { merge } = require("webpack-merge"); 3 | const copyWebpackPlugin = require("copy-webpack-plugin"); 4 | // 压缩 CSS 5 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); 6 | // css提取 7 | const miniCssExtractPlugin = require('mini-css-extract-plugin'); 8 | // js压缩 9 | const TerserPlugin = require('terser-webpack-plugin'); 10 | const webpackConfigBase = require('./webpack.base.conf'); 11 | const webpackConfigProd = { 12 | mode: 'production', 13 | output: { 14 | path: path.resolve(__dirname, '../dist'), 15 | filename: './js/[name].[chunkhash].js', 16 | publicPath: './', 17 | clean: true 18 | }, 19 | cache: { 20 | type: 'filesystem', 21 | buildDependencies: { 22 | config: [__filename] 23 | } 24 | }, 25 | plugins: [ 26 | //静态资源输出到根目录 27 | new copyWebpackPlugin({ 28 | patterns: [{ 29 | from: path.resolve(__dirname, "../public"), 30 | to: './', 31 | globOptions: { 32 | dot: true, 33 | gitignore: true, 34 | ignore: ["**/index.html*"], 35 | } 36 | }] 37 | }), 38 | new miniCssExtractPlugin({ 39 | filename: './css/[name].[contenthash].css', 40 | chunkFilename: './css/[id].[contenthash].css', 41 | }) 42 | ], 43 | module: { 44 | rules: [] 45 | }, 46 | optimization: { 47 | minimize: true, 48 | minimizer: [ 49 | new TerserPlugin({ 50 | // 多进程 51 | parallel: true, 52 | //删除注释 53 | extractComments: false, 54 | terserOptions: { 55 | compress: { // 生产环境去除console 56 | drop_console: true, 57 | drop_debugger: true, 58 | }, 59 | }, 60 | }), 61 | new CssMinimizerPlugin() 62 | ], 63 | splitChunks: { 64 | cacheGroups: { 65 | vendor: { 66 | test: /[\\/]node_modules[\\/]/, 67 | name: 'vendors', 68 | chunks: 'all', 69 | }, 70 | }, 71 | } 72 | 73 | } 74 | 75 | } 76 | 77 | module.exports = merge(webpackConfigBase(true), webpackConfigProd); -------------------------------------------------------------------------------- /build/webpack.rules.conf.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 2 | module.exports = function (prodMode) { 3 | return [ 4 | { 5 | test: /\.js$/, 6 | use: { 7 | loader: 'babel-loader', 8 | options: { 9 | cacheDirectory: true 10 | }, 11 | }, 12 | exclude: /node_modules/ 13 | }, 14 | { 15 | test: /\.(css|scss|sass)$/, 16 | use: [ 17 | !prodMode ? 'style-loader' 18 | : { 19 | loader: MiniCssExtractPlugin.loader, 20 | options: { 21 | publicPath: '../', 22 | }, 23 | }, 24 | 'css-loader', 25 | 'postcss-loader', 26 | 'sass-loader', 27 | ], 28 | }, 29 | { 30 | test: /\.(eot|svg|ttf|woff|)$/, 31 | type: "asset/resource", 32 | generator: { 33 | // 输出文件位置以及文件名 34 | filename: "fonts/[hash:8].[name][ext]" 35 | }, 36 | }, 37 | { 38 | test: /\.(png|jpg|svg|gif)$/, 39 | type: 'asset/resource', 40 | generator: { 41 | // [ext]前面自带"." 42 | filename: 'assets/[hash:8].[name][ext]', 43 | }, 44 | }, 45 | { 46 | test: /\.vue$/, 47 | loader: 'vue-loader' 48 | } 49 | ] 50 | 51 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "author": "zhouyupeng", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "cross-env envMode=dev webpack serve --config ./build/webpack.dev.conf.js --color", 9 | "build": "cross-env envMode=prod webpack --config build/webpack.prod.conf.js --color", 10 | "build:test": "cross-env envMode=test webpack --config build/webpack.prod.conf.js --color" 11 | }, 12 | "devDependencies": { 13 | "@babel/core": "^7.13.16", 14 | "@babel/preset-env": "^7.13.15", 15 | "@vue/compiler-sfc": "^3.0.11", 16 | "autoprefixer": "9.8.6", 17 | "babel-loader": "^8.2.2", 18 | "babel-plugin-import": "^1.13.3", 19 | "copy-webpack-plugin": "^8.1.1", 20 | "cross-env": "^7.0.3", 21 | "css-loader": "^5.2.4", 22 | "css-minimizer-webpack-plugin": "^2.0.0", 23 | "dotenv": "^10.0.0", 24 | "friendly-errors-webpack-plugin": "^1.7.0", 25 | "html-webpack-plugin": "^5.3.1", 26 | "less": "^4.1.1", 27 | "less-loader": "^10.0.0", 28 | "mini-css-extract-plugin": "^1.5.1", 29 | "node-sass": "^5.0.0", 30 | "postcss-loader": "^6.1.0", 31 | "postcss-px-to-viewport": "^1.1.1", 32 | "sass-loader": "^11.0.1", 33 | "style-loader": "^2.0.0", 34 | "vue-loader": "^16.2.0", 35 | "vue-template-compiler": "^2.6.12", 36 | "webpack": "5.43", 37 | "webpack-bundle-analyzer": "^4.4.1", 38 | "webpack-cli": "4.7.2", 39 | "webpack-dev-server": "^4.0.0-beta.3", 40 | "webpack-merge": "^5.7.3" 41 | }, 42 | "dependencies": { 43 | "axios": "^0.21.1", 44 | "core-js": "^3.11.0", 45 | "vant": "^3.0.18", 46 | "vconsole": "^3.7.0", 47 | "vue": "^3.0.11", 48 | "vue-router": "4", 49 | "vuex": "^4.0.0" 50 | }, 51 | "browserslist": [ 52 | "> 0.1%", 53 | "last 2 versions" 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | module.exports = ({file}) => { 3 | const designWidth = file.includes(path.join('node_modules', 'vant')) ? 375 : 750; 4 | return { 5 | plugins: { 6 | autoprefixer: { 7 | overrideBrowserslist: [ 8 | 'Android 4.1', 9 | 'iOS 7.1', 10 | 'Chrome > 31', 11 | 'ff > 31', 12 | 'ie >= 8' 13 | ] 14 | }, 15 | 'postcss-px-to-viewport': { 16 | unitToConvert: 'px', // 需要转换的单位，默认为"px" 17 | viewportWidth: designWidth, // 设计稿的视口宽度 18 | unitPrecision: 5, // 单位转换后保留的精度 19 | propList: ['*'], // 能转化为vw的属性列表 20 | viewportUnit: 'vw', // 希望使用的视口单位 21 | fontViewportUnit: 'vw', // 字体使用的视口单位 22 | selectorBlackList: ['.ignore', '.hairlines', '.ig-'], // 需要忽略的CSS选择器 23 | minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换 24 | mediaQuery: false, // 媒体查询里的单位是否需要转换单位 25 | replace: true, // 是否直接更换属性值，而不添加备用属性 26 | include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//) 27 | landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) 28 | landscapeUnit: 'vw', // 横屏时使用的单位 29 | landscapeWidth: 568 // 横屏时使用的视口宽度 30 | } 31 | 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 |
12 | 13 | <% for (var i in 14 | htmlWebpackPlugin.options.files&&htmlWebpackPlugin.options.files.js) { %> 15 | 16 | <% } %> 17 | 18 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhouyupeng/webpack5-vue3/81d92dded5e26d8e4c4b645644968f239185dec5/public/logo.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | #### 文章介绍 2 | 3 | [掘金](https://juejin.cn/post/6989973871663251487) 4 | 5 | > demo地址: [https://zhouyupeng.github.io/webpack5-vue3/](https://zhouyupeng.github.io/webpack5-vue3/) 6 | ``` 7 | yarn install 8 | yarn dev 9 | ``` 10 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 14 | 26 | -------------------------------------------------------------------------------- /src/api/base.js: -------------------------------------------------------------------------------- 1 | const saBs = {} // 基础功能 2 | 3 | // 全局参数 4 | saBs.$version = '1.0.0' 5 | saBs.$apiServer = { 6 | baseApi: process.env.VUE_APP_BASE_API, 7 | apiUser:process.env.VUE_APP_API_USER 8 | } 9 | console.log('saBs',saBs); 10 | saBs.$api = { 11 | login: `${saBs.$apiServer.baseApi}/mock/973ec681e817a650ec18f8fb17af90e8/user/login`, // 登录 12 | user:`${saBs.$apiServer.apiUser}/mock/user11` 13 | } 14 | export { 15 | saBs 16 | } -------------------------------------------------------------------------------- /src/api/index.js: -------------------------------------------------------------------------------- 1 | import { postJson, get } from '@/utils/http.js' 2 | import { saBs } from '@/api/base.js' 3 | function login(params) { 4 | return postJson(saBs.$api.login, params) 5 | } 6 | function user(params) { 7 | return get(saBs.$api.user, params) 8 | } 9 | export { 10 | login, 11 | user 12 | } -------------------------------------------------------------------------------- /src/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhouyupeng/webpack5-vue3/81d92dded5e26d8e4c4b645644968f239185dec5/src/assets/img/logo.png -------------------------------------------------------------------------------- /src/assets/img/qrcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhouyupeng/webpack5-vue3/81d92dded5e26d8e4c4b645644968f239185dec5/src/assets/img/qrcode.jpg -------------------------------------------------------------------------------- /src/assets/img/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhouyupeng/webpack5-vue3/81d92dded5e26d8e4c4b645644968f239185dec5/src/assets/img/test.jpg -------------------------------------------------------------------------------- /src/filters/index.js: -------------------------------------------------------------------------------- 1 | 2 | //https://v3.cn.vuejs.org/guide/migration/filters.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5 3 | // 过滤日期格式，传入时间戳，根据参数返回不同格式 4 | const formatTimers = function(val, hours) { 5 | if (val) { 6 | var dateTimer = new Date(val * 1000) 7 | var y = dateTimer.getFullYear() 8 | var M = dateTimer.getMonth() + 1 9 | var d = dateTimer.getDate() 10 | var h = dateTimer.getHours() 11 | var m = dateTimer.getMinutes() 12 | M = M >= 10 ? M : '0' + M 13 | d = d >= 10 ? d : '0' + d 14 | h = h >= 10 ? h : '0' + h 15 | m = m >= 10 ? m : '0' + m 16 | if (hours) { 17 | return y + '-' + M + '-' + d + ' ' + h + ':' + m 18 | } else { 19 | return y + '-' + M + '-' + d 20 | } 21 | } 22 | } 23 | export default { 24 | formatTimers 25 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import router from './router/index.js'; 4 | import installVant from './plugins/vant' 5 | import "./style/global.scss"; 6 | import store from './store/index.js'; 7 | import filters from './filters/index' 8 | console.log('process.env', process.env); 9 | // 开发测试环境显示console 10 | if (process.env.VUE_APP_SHOWCONSOLE === 'true') { 11 | let Vconsole = require('../node_modules/vconsole/dist/vconsole.min'); 12 | new Vconsole(); 13 | } 14 | const app = createApp(App) 15 | // vue3 移除了filter过滤器 https://v3.cn.vuejs.org/guide/migration/filters.html#%E5%85%A8%E5%B1%80%E8%BF%87%E6%BB%A4%E5%99%A8 16 | app.config.globalProperties.$filters = { 17 | ...filters 18 | } 19 | installVant(app) 20 | app.use(router).use(store).mount('#app') -------------------------------------------------------------------------------- /src/plugins/vant.js: -------------------------------------------------------------------------------- 1 | import { Button, Field, Form } from 'vant'; 2 | export default (app) => { 3 | app.use(Button) 4 | app.use(Form) 5 | app.use(Field) 6 | } 7 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory } from "vue-router"; 2 | import store from '../store/index' 3 | const Index = () => import(/* webpackChunkName: "index" */ '../views/index.vue') 4 | const Login = () => import(/* webpackChunkName: "login" */ '../views/login.vue') 5 | const About = () => import(/* webpackChunkName: "about" */ '../views/about.vue') 6 | const hash = createWebHashHistory(); 7 | const router = createRouter({ 8 | history: hash, 9 | routes: [ 10 | { 11 | path: '/', 12 | name: 'index', 13 | component: Index, 14 | meta: { 15 | auth: false, // 是否需要登录 16 | keepAlive: false // 是否缓存组件 17 | } 18 | }, 19 | { 20 | path: '/login', 21 | name: 'login', 22 | component: Login, 23 | meta: { 24 | auth: false, 25 | keepAlive: false, 26 | hide:true 27 | } 28 | }, 29 | { 30 | path: '/about', 31 | name: 'about', 32 | component: About, 33 | meta: { 34 | auth: true, // 是否需要登录 35 | keepAlive: false // 是否缓存组件 36 | } 37 | } 38 | ] 39 | }); 40 | // 全局路由钩子函数 对全局有效 41 | router.beforeEach((to, from, next) => { 42 | let auth = to.meta.auth 43 | let token = store.state.token; 44 | if (auth && !token) { // 需要登录 45 | next({ 46 | path: '/login', 47 | query: { 48 | fullPath: to.fullPath 49 | } 50 | }) 51 | } else { 52 | next() 53 | } 54 | }) 55 | export default router; -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'vuex'; 2 | const store = createStore({ 3 | state: { 4 | title: '渐进式JavaScript 框架', 5 | token: localStorage.getItem('token') || '', 6 | user: JSON.parse(localStorage.getItem('userData')) || {} 7 | }, 8 | getters: {}, 9 | actions: {}, 10 | mutations: { 11 | LOGIN(state, parameters){ 12 | let data = parameters.data 13 | state.token = data.token; 14 | state.user = data; 15 | localStorage.setItem('token', data.token) 16 | localStorage.setItem('userData', JSON.stringify(data)) 17 | } 18 | }, 19 | modules: {} 20 | }) 21 | 22 | export default store; -------------------------------------------------------------------------------- /src/style/_variables.scss: -------------------------------------------------------------------------------- 1 | $color-main:red; -------------------------------------------------------------------------------- /src/style/global.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | [v-cloak]{display: none;}/*隐藏未编译的 Mustache 标签直到实例准备完毕。*/ 4 | /*隐藏横向和纵向滚动条*/ 5 | ::-webkit-scrollbar, 6 | ::-webkit-scrollbar:horizontal { 7 | display: none; 8 | height: 0; 9 | } 10 | /* 使用图片作为a标签的点击按钮时，当触发touchstart的时候，往往会有一个灰色的背景 */ 11 | a,a:hover,a:active,a:visited,a:link,a:focus{ 12 | -webkit-tap-highlight-color:rgba(0,0,0,0); 13 | -webkit-tap-highlight-color: transparent; 14 | } 15 | /* 去除ios input框点击时的灰色背景 */ 16 | input{ 17 | outline:none; 18 | -webkit-tap-highlight-color:rgba(0,0,0,0); 19 | } 20 | 21 | select { 22 | /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ 23 | border: solid 1px #333; 24 | /*很关键：将默认的select选择框样式清除*/ 25 | appearance:none; 26 | -moz-appearance:none; 27 | -webkit-appearance:none; 28 | /*在选择框的最右侧中间显示小箭头图片*/ 29 | /*background: url('~@/assets/img/') no-repeat scroll right center transparent;*/ 30 | /*background: url('https://raw.githubusercontent.com/ourjs/static/gh-pages/2015/arrow.png') no-repeat scroll right center transparent;*/ 31 | /*为下拉小箭头留出一点位置，避免被文字覆盖*/ 32 | /*padding-right: 14px;*/ 33 | } 34 | 35 | /*清除ie的默认选择框样式清除，隐藏下拉箭头*/ 36 | select::-ms-expand { 37 | display: none; 38 | } 39 | 40 | /* 主体样式 */ 41 | body{ 42 | color: #222; line-height: 1.5;font-size: 32px; font-family: Verdana, 'Hiragino Sans GB', 'Microsoft YaHei', 微软雅黑,'Helvetica Neue', Helvetica, Arial, sans-serif; 43 | } 44 | /*body {background-color: #f8f8f8;}*/ 45 | html, body, #app{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width:100%;margin: 0;padding: 0;} 46 | /*html, body{overflow-y: auto;}*/ 47 | li{list-style:none;} 48 | ul,li{margin: 0; padding: 0;} 49 | a{color: #333;} 50 | p{color: unset;padding: 0;margin: 0;text-align: left;} 51 | i{font-style: normal;} 52 | s{text-decoration: none;} 53 | iframe{display: block;} 54 | h1, h2, h3, h4, h5, h6{margin: 0;/* padding-top: 5px; padding-bottom: 5px;*/} 55 | 56 | /* 辅助 */ 57 | .f-justifyfix{display:inline-block; width:100%; height:0; overflow:hidden;} 58 | 59 | /* 解决BUG */ 60 | label > * {pointer-events: none;} 61 | img {content: normal !important;} 62 | .ell{ 63 | overflow: hidden; 64 | -ms-text-overflow: ellipsis; 65 | text-overflow: ellipsis; 66 | white-space: nowrap; 67 | } 68 | .ell2{ 69 | word-break: break-all; 70 | text-overflow: ellipsis; 71 | display: -webkit-box; 72 | -webkit-box-orient: vertical; 73 | -webkit-line-clamp: 2; 74 | overflow: hidden; 75 | } 76 | .clr { 77 | &:after { 78 | clear: both; 79 | content: '.'; 80 | display: block; 81 | height: 0; 82 | line-height: 0; 83 | overflow: hidden; 84 | } 85 | 86 | *height: 1%; 87 | } 88 | 89 | .hidden{ 90 | display: none; 91 | } -------------------------------------------------------------------------------- /src/utils/http.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import qs from 'qs' 3 | // import store from 'store/index' 4 | axios.defaults.timeout = 12000 // 请求超时时间 5 | // axios.defaults.baseURL = process.env.VUE_APP_BASE_API 6 | 7 | axios.defaults.headers.post['Content-Type'] = 8 | 'application/x-www-form-urlencoded;charset=UTF-8' // post请求头的设置 9 | // axios 请求拦截器 10 | axios.interceptors.request.use( 11 | config => { 12 | // 可在此设置要发送的token 13 | // let token = store.getters['login/token']; 14 | // token && (config.headers.token = token) 15 | // Indicator.open('数据加载中') 16 | return config 17 | }, 18 | error => { 19 | return Promise.error(error) 20 | } 21 | ) 22 | // axios respone拦截器 23 | axios.interceptors.response.use( 24 | response => { 25 | // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 26 | // 否则的话抛出错误 结合自身业务和后台返回的接口状态约定写respone拦截器 27 | // Indicator.close() 28 | if (response.status === 200 && response.data.code === 0) { 29 | return Promise.resolve(response) 30 | } else { 31 | return Promise.reject(response) 32 | } 33 | }, 34 | error => { 35 | // Indicator.close() 36 | const responseCode = error.response.status 37 | switch (responseCode) { 38 | // 401：未登录 39 | case 401: 40 | break 41 | // 404请求不存在 42 | case 404: 43 | 44 | break 45 | default: 46 | 47 | } 48 | 49 | return Promise.reject(error.response) 50 | } 51 | ) 52 | /** 53 | * 封装get方法，对应get请求 54 | * @param {String} url [请求的url地址] 55 | * @param {Object} params [请求时携带的参数] 56 | */ 57 | function get (url, params = {}) { 58 | return new Promise((resolve, reject) => { 59 | axios 60 | .get(url, { 61 | params: params 62 | }) 63 | .then(res => { 64 | resolve(res.data) 65 | }) 66 | .catch(err => { 67 | reject(err) 68 | }) 69 | }) 70 | // 或者return axios.get(); 71 | } 72 | /** 73 | * post方法，对应post请求 74 | * @param {String} url [请求的url地址] 75 | * @param {Object} params [请求时携带的参数] 76 | */ 77 | function post (url, params) { 78 | return new Promise((resolve, reject) => { 79 | axios 80 | .post(url, qs.stringify(params)) 81 | .then(res => { 82 | resolve(res.data) 83 | }) 84 | .catch(err => { 85 | reject(err) 86 | }) 87 | }) 88 | // 或者return axios.post(); 89 | } 90 | function postJson(url, params) { 91 | axios.defaults.headers.post['Content-Type'] = 92 | 'application/json;charset=UTF-8' // post请求头的设置 93 | return new Promise((resolve, reject) => { 94 | axios 95 | .post(url, params, { 96 | headers: { 97 | token: '' 98 | } 99 | }) 100 | .then(res => { 101 | resolve(res.data || res) 102 | }) 103 | .catch(err => { 104 | reject(err) 105 | }) 106 | }) 107 | } 108 | export { get, post ,postJson} 109 | -------------------------------------------------------------------------------- /src/views/about.vue: -------------------------------------------------------------------------------- 1 | 12 | 31 | -------------------------------------------------------------------------------- /src/views/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 28 | -------------------------------------------------------------------------------- /src/views/login.vue: -------------------------------------------------------------------------------- 1 | 28 | 77 | --------------------------------------------------------------------------------