7721bb62 by 宋楠

2.0.0

1 parent a0582f14
> 1%
last 2 versions
NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'
#base url
BASE_URL = 'https://www.xxx.com/'
# base api
VUE_APP_BASE_API = '/dev-api'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
......
NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'
#base url
BASE_URL = 'https://www.xxx.com/'
# base api
VUE_APP_BASE_API = '/prod-api'
\ No newline at end of file
......
NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'
#base url
BASE_URL = 'https://www.xxx.com/'
# base api
VUE_APP_BASE_API = '/stage-api'
......
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true
node: true
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint"
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
'vue/max-attributes-per-line': [
2,
{
singleline: 10,
multiline: {
max: 1,
allowFirstLine: false
}
}
],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/name-property-casing': ['error', 'PascalCase'],
'vue/no-v-html': 'off',
'accessor-pairs': 2,
'arrow-spacing': [
2,
{
before: true,
after: true
}
],
'block-spacing': [2, 'always'],
'brace-style': [
2,
'1tbs',
{
allowSingleLine: true
}
],
camelcase: [
0,
{
properties: 'always'
}
],
'comma-dangle': [2, 'never'],
'comma-spacing': [
2,
{
before: false,
after: true
}
],
'comma-style': [2, 'last'],
'constructor-super': 2,
curly: [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
eqeqeq: ['error', 'always', { null: 'ignore' }],
'generator-star-spacing': [
2,
{
before: true,
after: true
}
],
'handle-callback-err': [2, '^(err|error)$'],
'indent': ['off', 2],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [
2,
{
beforeColon: false,
afterColon: true
}
],
'keyword-spacing': [
2,
{
before: true,
after: true
}
],
'new-cap': [
2,
{
newIsCap: true,
capIsNew: false
}
],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [
2,
{
allowLoop: false,
allowSwitch: false
}
],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [
2,
{
max: 1
}
],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [
2,
{
defaultAssignment: false
}
],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [
2,
{
vars: 'all',
args: 'none'
}
],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [
2,
{
initialized: 'never'
}
],
'operator-linebreak': [
2,
'after',
{
overrides: {
'?': 'before',
':': 'before'
}
}
],
'padded-blocks': [2, 'never'],
quotes: [
2,
'single',
{
avoidEscape: true,
allowTemplateLiterals: true
}
],
semi: [2, 'never'],
'semi-spacing': [
2,
{
before: false,
after: true
}
],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [
2,
{
words: true,
nonwords: false
}
],
'spaced-comment': [
2,
'always',
{
markers: [
'global',
'globals',
'eslint',
'eslint-disable',
'*package',
'!',
','
]
}
],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
yoda: [2, 'never'],
'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [
2,
'always',
{
objectsInObjects: false
}
],
'array-bracket-spacing': [2, 'never'],
'vue/html-self-closing': ["error",{
"html": {
"void": "never",
"normal": "any",
"component": "any"
},
"svg": "always",
"math": "always"
}]
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
}
}
};
......
.DS_Store
node_modules/
dist/
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
tests/**/coverage/
# Editor directories and files
.idea
......@@ -14,3 +18,4 @@ tests/**/coverage/
*.ntvs*
*.njsproj
*.sln
*.sw?
......
{
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "none",
"semi": false,
"wrap_line_length": 120,
"wrap_attributes": "auto",
"proseWrap": "always",
"arrowParens": "avoid",
"bracketSpacing": false,
"jsxBracketSameLine": true,
"useTabs": false,
"overrides": [{
"files": ".prettierrc",
"options": {
"parser": "json"
}
}]
}
\ No newline at end of file
language: node_js
node_js: 10
script: npm run test
notifications:
email: false
MIT License
Copyright (c) 2017-present PanJiaChen
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
# vue-h5-template
基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架
[demo](https://solui.cn/vue-h5-template/#/)建议手机端查看
#### 介绍
[关于项目介绍](https://segmentfault.com/a/1190000019275330)
1. vuecli3.0
2. 多环境开发
3. axios封装
4. rem适配方案
5. 生产环境cdn优化首屏加速
6. babel低版本浏览器兼容
7. 环境发布脚本
- Vue-cli4
- VantUI组件按需加载
- Sass
- Webpack 4
- Vuex
- Axios封装
- rem适配方案
- 多环境配置
- 生产环境cdn优化首屏加速
- babel低版本浏览器兼容
- Eslint+Pettier统一开发规范
#### 多环境
......
module.exports = {
presets: [['@vue/app', { useBuiltIns: 'entry' }]],
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
plugins: [
[
'import',
......
const { run } = require('runjs')
const chalk = require('chalk')
// const config = require('../vue.config.js')
const rawArgv = process.argv.slice(2)
const args = rawArgv.join(' ')
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
const report = rawArgv.includes('--report')
run(`vue-cli-service build ${args}`)
const port = 9018
const publicPath = '/'
var connect = require('connect')
var serveStatic = require('serve-static')
const app = connect()
app.use(
publicPath,
serveStatic('./dist', {
index: ['index.html', '/']
})
)
app.listen(port, function () {
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
if (report) {
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
}
})
} else {
run(`vue-cli-service build ${args}`)
}
module.exports = {
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest'
},
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: ['jest-serializer-vue'],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
coverageDirectory: '<rootDir>/tests/unit/coverage',
// 'collectCoverage': true,
'coverageReporters': [
'lcov',
'text-summary'
],
testURL: 'http://localhost/'
}
This diff could not be displayed because it is too large.
{
"name": "vue-h5-template",
"version": "1.0.0",
"description": "A vue h5 template with Vant UI",
"author": "Sunnie <s406803045@163.com>",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve --open",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
},
"dependencies": {
"axios": "0.19.0",
"fastclick": "^1.0.6",
"lib-flexible": "^0.3.2",
"normalize.css": "7.0.0",
"vant": "^2.2.14",
"vue": "2.6.10",
"vue-router": "3.0.6",
"vuex": "3.1.0"
},
"devDependencies": {
"@babel/core": "7.0.0",
"@babel/register": "7.0.0",
"@vue/cli-plugin-babel": "3.6.0",
"@vue/cli-plugin-eslint": "3.6.0",
"@vue/cli-plugin-unit-jest": "3.6.3",
"@vue/cli-service": "3.6.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-jest": "23.6.0",
"babel-plugin-import": "^1.11.2",
"chalk": "2.4.2",
"connect": "3.6.6",
"eslint": "5.15.3",
"eslint-plugin-vue": "5.2.2",
"html-webpack-plugin": "3.2.0",
"node-sass": "^4.9.0",
"postcss-pxtorem": "^4.0.1",
"runjs": "^4.3.2",
"sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "2.1.3",
"script-loader": "0.7.2",
"serve-static": "^1.13.2",
"svgo": "1.2.2",
"vue-template-compiler": "2.6.10"
},
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
"name": "vue-h5-template",
"version": "2.0.0",
"description": "A vue h5 template with Vant UI",
"author": "Sunnie <s406803045@163.com>",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"lib-flexible": "^0.3.2",
"vant": "^2.4.7",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"vuex": "^3.1.2"
},
"devDependencies": {
"@babel/polyfill": "^7.8.3",
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.3",
"babel-plugin-import": "^1.13.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.1.2",
"node-sass": "^4.13.1",
"postcss-pxtorem": "^4.0.1",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"script-ext-html-webpack-plugin": "^2.1.4",
"vue-template-compiler": "^2.6.11"
}
}
......
No preview for this file type
......@@ -7,8 +7,7 @@
</div>
</template>
<script>
export default {
name: 'App'
}
export default {
name: 'App'
}
</script>
......
import qs from 'qs'
import request from '@/utils/request'
import { api } from '@/config'
// api
const { common_api } = api
// 登录
export function login(params) {
return request({
url: common_api + '/ruleCommon/queryrule',
url: '/user/login',
method: 'post',
data: qs.stringify(params)
})
}
// 用户信息
export function getUserInfo(params) {
return request({
url: '/user/userinfo',
method: 'get',
data: qs.stringify(params)
})
}
......
@import './variables.scss';
@import './mixin.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;
}
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;
}
.app-container{
padding-bottom:50px
}
\ No newline at end of file
......
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
@mixin scrollBar {
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
@mixin relative {
position: relative;
width: 100%;
height: 100%;
}
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$sideBarWidth: 210px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
</li>
<li>
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
// 本地
module.exports = {
title: 'vue-h5-template',
baseUrl: 'https://test.xxx.com', // 项目地址
baseApi: 'https://test.xxx.com', // 本地api请求地址
api: {
base_api: 'https://xxx.xxx.com/admin',
common_api: 'https://xxx.xxx.com/common'
......
// 正式
module.exports = {
title: 'vue-h5-template',
baseUrl: 'https://www.xxx.com/', // 正式项目地址
baseApi: 'https://test.xxx.com', // 正式api请求地址
api: {
base_api: 'https://xxx.xxx.com/admin',
common_api: 'https://xxx.xxx.com/common'
......
module.exports = {
title: 'vue-h5-template',
baseUrl: 'https://test.xxx.com', // 测试项目地址
baseApi: 'https://test.xxx.com', // 测试api请求地址
api: {
base_api: 'https://xxx.xxx.com/admin',
common_api: 'https://xxx.xxx.com/common'
......
// 根据环境引入不同配置 process.env.NODE_ENV
// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config
module.exports = config
......
import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import '@/assets/css/index.scss' // global css
import App from './App.vue'
import router from './router'
import store from './store'
// 引入全局样式
import '@/assets/css/index.scss'
// 全局引入按需引入UI库 vant
import '@/plugins/vant'
// IE 兼容
import '@babel/polyfill'
// 移动端适配
import 'lib-flexible/flexible.js'
import App from './App'
import store from './store'
import router from './router'
import '@/filters' // filters
import '@/permission' // permission 权限
// 解决移动端click事件300毫秒延迟方法
import FastClick from 'fastclick'
if ('addEventListener' in document) {
document.addEventListener(
'DOMContentLoaded',
function() {
FastClick.attach(document.body)
},
false
)
}
// filters
import './filters'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
......
import router from './router'
router.beforeEach(async(to, from, next) => {
next()
})
router.afterEach(() => {})
// 按需全局引入 vant组件
import Vue from 'vue'
import {Button, List, Cell, Tabbar, TabbarItem} from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Tabbar).use(TabbarItem)
......@@ -2,9 +2,10 @@ import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRoutes = [
export const router = [
{
path: '/',
name: 'index',
component: () => import('@/views/home/index'),
meta: {
keepAlive: false
......@@ -14,10 +15,10 @@ export const constantRoutes = [
const createRouter = () =>
new Router({
mode: 'history', // require service support
base: '/app/',
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
// mode: 'history', // 如果你是 history模式 需要配置vue.config.js publicPath
// base: '/app/',
scrollBehavior: () => ({y: 0}),
routes: router
})
export default createRouter()
......
const getters = {
userName: state => state.app.userName
}
export default getters
......
const state = {
userName: ''
}
const mutations = {
SET_USER_NAME(state, name) {
state.userName = name
}
}
const actions = {
// 设置name
setUserName({commit}, name) {
commit('SET_USER_NAME', name)
}
}
export default {
namespaced: true,
state,
......
import axios from 'axios'
import store from '@/store'
import { Toast } from 'vant'
import { api } from '@/config'
import {Toast} from 'vant'
// 根据环境不同引入不同api地址
import {baseApi} from '@/config'
// create an axios instance
const service = axios.create({
baseURL: api.base_api, // url = base url + request url
baseURL: baseApi, // url = base api url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
......
<!-- home -->
<template>
<div>
<h1>home</h1>
<van-button type="primary">主要按钮</van-button>
</div>
</template>
<script>
// import { api } from '@/config'
import {
Button
} from 'vant'
export default {
components: {
'van-button': Button
},
data () {
return {}
},
computed: {},
mounted () {
console.log(process.env)
},
methods: {}
}
</script>
<style lang='scss' scoped>
h1 {
background: red;
width: 375px;
}
</style>
<!-- home -->
<template>
<div class="app-container">
<div class="warpper">
<h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span>VUE H5开发模板</span></h1>
<h2 class="demo-home__desc">
A vue h5 template with Vant UI
</h2>
</div>
<van-cell icon="success" v-for="item in list" :key="item" :title="item" />
<van-tabbar fixed v-model="active" @change="onChange">
<van-tabbar-item icon="home-o">首页</van-tabbar-item>
<van-tabbar-item icon="good-job-o">github</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
// 请求接口
import {getUserInfo} from '@/api/user.js'
export default {
components: {},
data() {
return {
active: 0,
list: [
'Vue-cli4',
'VantUI组件按需加载',
'Sass',
'Webpack 4',
'Vue-router',
'Vuex',
'Axios封装',
'rem适配方案',
'多环境配置',
'生产环境cdn优化首屏加速',
'babel低版本浏览器兼容',
'Eslint+Pettier统一开发规范'
]
}
},
computed: {},
mounted() {
this.initData()
},
methods: {
// 请求数据案例
initData() {
// 请求接口数据,仅作为展示,需要配置src->config下环境文件
getUserInfo()
.then(() => {})
.catch(() => {})
},
onChange(index) {
if (index === 1) window.location.href = 'https://github.com/sunnie1992/vue-h5-template'
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
.warpper {
padding: 12px;
.demo-home__title {
margin: 0 0 6px;
font-size: 32px;
.demo-home__title img,
.demo-home__title span {
display: inline-block;
vertical-align: middle;
}
img {
width: 32px;
}
span {
margin-left: 16px;
font-weight: 500;
}
}
.demo-home__desc {
margin: 0 0 20px;
color: rgba(69, 90, 100, 0.6);
font-size: 14px;
}
}
}
</style>
......
......@@ -4,7 +4,6 @@ const defaultSettings = require('./src/config/index.js')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title || 'vue mobile template' // page title
const port = 9018 // dev port
const externals = {
......@@ -19,13 +18,12 @@ const cdn = {
// 开发环境
dev: {
css: [],
js: ['https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js']
js: []
},
// 生产环境
build: {
css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'],
js: [
'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js',
'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js',
......@@ -36,7 +34,8 @@ const cdn = {
}
}
module.exports = {
publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', // 需要区分生产环境和开发环境,不然build会报错
publicPath: './', // router hash 模式使用
// publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', //router history模式使用 需要区分生产环境和开发环境,不然build会报错
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
......@@ -60,8 +59,8 @@ module.exports = {
})
}
// 为开发环境修改配置...
if (process.env.NODE_ENV === 'development') {
}
// if (process.env.NODE_ENV === 'development') {
// }
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
......@@ -70,8 +69,10 @@ module.exports = {
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('api', resolve('src/api'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'))
/**
* 添加CDN参数到htmlWebpackPlugin配置中, 详见public/index.html 修改
*/
......@@ -114,23 +115,18 @@ module.exports = {
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
// elementUI: {
// name: 'chunk-elementUI', // split elementUI into a single package
// priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
// test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
// },
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
},
libs: {
name: 'chunk-libs',
chunks: 'initial', // only package third parties that are initially dependent
test: /[\\/]node_modules[\\/]/,
priority: 10
}
}
})
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!