Skip to content

xqz / dianDemo

Go to a project
Toggle navigation
Toggle navigation pinning
7721bb62 by 宋楠
Options

2.0.0

1 parent a0582f14
Inline Side-by-side
Showing 39 changed files with 319 additions and 627 deletions
.browserslistrc 0 → 100644
1 > 1%
2 last 2 versions
.env.development
1 NODE_ENV='development' 1 NODE_ENV='development'
2 # must start with VUE_APP_ 2 # must start with VUE_APP_
3 VUE_APP_ENV = 'development' 3 VUE_APP_ENV = 'development'
4 #base url 4
5 BASE_URL = 'https://www.xxx.com/'
6 # base api
7 VUE_APP_BASE_API = '/dev-api'
8 VUE_CLI_BABEL_TRANSPILE_MODULES = true
......
.env.production
1 NODE_ENV='production' 1 NODE_ENV='production'
2 # must start with VUE_APP_ 2 # must start with VUE_APP_
3 VUE_APP_ENV = 'production' 3 VUE_APP_ENV = 'production'
4 #base url
5 BASE_URL = 'https://www.xxx.com/'
6 # base api
7 VUE_APP_BASE_API = '/prod-api'
8 4
...\ No newline at end of file ...\ No newline at end of file
......
.env.staging
1 NODE_ENV='production' 1 NODE_ENV='production'
2 # must start with VUE_APP_ 2 # must start with VUE_APP_
3 VUE_APP_ENV = 'staging' 3 VUE_APP_ENV = 'staging'
4 #base url
5 BASE_URL = 'https://www.xxx.com/'
6 # base api
7 VUE_APP_BASE_API = '/stage-api'
8 4
......
.eslintrc.js
1 module.exports = { 1 module.exports = {
2 root: true, 2 root: true,
3 parserOptions: {
4 parser: 'babel-eslint',
5 sourceType: 'module'
6 },
7 env: { 3 env: {
8 browser: true, 4 node: true
9 node: true,
10 es6: true
11 }, 5 },
12 extends: ['plugin:vue/recommended', 'eslint:recommended'], 6 extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
13 7 parserOptions: {
14 // add your custom rules here 8 parser: "babel-eslint"
15 //it is base on https://github.com/vuejs/eslint-config-vue
16 rules: {
17 'vue/max-attributes-per-line': [
18 2,
19 {
20 singleline: 10,
21 multiline: {
22 max: 1,
23 allowFirstLine: false
24 }
25 }
26 ],
27 'vue/singleline-html-element-content-newline': 'off',
28 'vue/multiline-html-element-content-newline': 'off',
29 'vue/name-property-casing': ['error', 'PascalCase'],
30 'vue/no-v-html': 'off',
31 'accessor-pairs': 2,
32 'arrow-spacing': [
33 2,
34 {
35 before: true,
36 after: true
37 }
38 ],
39 'block-spacing': [2, 'always'],
40 'brace-style': [
41 2,
42 '1tbs',
43 {
44 allowSingleLine: true
45 }
46 ],
47 camelcase: [
48 0,
49 {
50 properties: 'always'
51 }
52 ],
53 'comma-dangle': [2, 'never'],
54 'comma-spacing': [
55 2,
56 {
57 before: false,
58 after: true
59 }
60 ],
61 'comma-style': [2, 'last'],
62 'constructor-super': 2,
63 curly: [2, 'multi-line'],
64 'dot-location': [2, 'property'],
65 'eol-last': 2,
66 eqeqeq: ['error', 'always', { null: 'ignore' }],
67 'generator-star-spacing': [
68 2,
69 {
70 before: true,
71 after: true
72 }
73 ],
74 'handle-callback-err': [2, '^(err|error)$'],
75 'indent': ['off', 2],
76 'jsx-quotes': [2, 'prefer-single'],
77 'key-spacing': [
78 2,
79 {
80 beforeColon: false,
81 afterColon: true
82 }
83 ],
84 'keyword-spacing': [
85 2,
86 {
87 before: true,
88 after: true
89 }
90 ],
91 'new-cap': [
92 2,
93 {
94 newIsCap: true,
95 capIsNew: false
96 }
97 ],
98 'new-parens': 2,
99 'no-array-constructor': 2,
100 'no-caller': 2,
101 'no-console': 'off',
102 'no-class-assign': 2,
103 'no-cond-assign': 2,
104 'no-const-assign': 2,
105 'no-control-regex': 0,
106 'no-delete-var': 2,
107 'no-dupe-args': 2,
108 'no-dupe-class-members': 2,
109 'no-dupe-keys': 2,
110 'no-duplicate-case': 2,
111 'no-empty-character-class': 2,
112 'no-empty-pattern': 2,
113 'no-eval': 2,
114 'no-ex-assign': 2,
115 'no-extend-native': 2,
116 'no-extra-bind': 2,
117 'no-extra-boolean-cast': 2,
118 'no-extra-parens': [2, 'functions'],
119 'no-fallthrough': 2,
120 'no-floating-decimal': 2,
121 'no-func-assign': 2,
122 'no-implied-eval': 2,
123 'no-inner-declarations': [2, 'functions'],
124 'no-invalid-regexp': 2,
125 'no-irregular-whitespace': 2,
126 'no-iterator': 2,
127 'no-label-var': 2,
128 'no-labels': [
129 2,
130 {
131 allowLoop: false,
132 allowSwitch: false
133 }
134 ],
135 'no-lone-blocks': 2,
136 'no-mixed-spaces-and-tabs': 2,
137 'no-multi-spaces': 2,
138 'no-multi-str': 2,
139 'no-multiple-empty-lines': [
140 2,
141 {
142 max: 1
143 }
144 ],
145 'no-native-reassign': 2,
146 'no-negated-in-lhs': 2,
147 'no-new-object': 2,
148 'no-new-require': 2,
149 'no-new-symbol': 2,
150 'no-new-wrappers': 2,
151 'no-obj-calls': 2,
152 'no-octal': 2,
153 'no-octal-escape': 2,
154 'no-path-concat': 2,
155 'no-proto': 2,
156 'no-redeclare': 2,
157 'no-regex-spaces': 2,
158 'no-return-assign': [2, 'except-parens'],
159 'no-self-assign': 2,
160 'no-self-compare': 2,
161 'no-sequences': 2,
162 'no-shadow-restricted-names': 2,
163 'no-spaced-func': 2,
164 'no-sparse-arrays': 2,
165 'no-this-before-super': 2,
166 'no-throw-literal': 2,
167 'no-trailing-spaces': 2,
168 'no-undef': 2,
169 'no-undef-init': 2,
170 'no-unexpected-multiline': 2,
171 'no-unmodified-loop-condition': 2,
172 'no-unneeded-ternary': [
173 2,
174 {
175 defaultAssignment: false
176 }
177 ],
178 'no-unreachable': 2,
179 'no-unsafe-finally': 2,
180 'no-unused-vars': [
181 2,
182 {
183 vars: 'all',
184 args: 'none'
185 }
186 ],
187 'no-useless-call': 2,
188 'no-useless-computed-key': 2,
189 'no-useless-constructor': 2,
190 'no-useless-escape': 0,
191 'no-whitespace-before-property': 2,
192 'no-with': 2,
193 'one-var': [
194 2,
195 {
196 initialized: 'never'
197 }
198 ],
199 'operator-linebreak': [
200 2,
201 'after',
202 {
203 overrides: {
204 '?': 'before',
205 ':': 'before'
206 }
207 }
208 ],
209 'padded-blocks': [2, 'never'],
210 quotes: [
211 2,
212 'single',
213 {
214 avoidEscape: true,
215 allowTemplateLiterals: true
216 }
217 ],
218 semi: [2, 'never'],
219 'semi-spacing': [
220 2,
221 {
222 before: false,
223 after: true
224 }
225 ],
226 'space-before-blocks': [2, 'always'],
227 'space-before-function-paren': [2, 'never'],
228 'space-in-parens': [2, 'never'],
229 'space-infix-ops': 2,
230 'space-unary-ops': [
231 2,
232 {
233 words: true,
234 nonwords: false
235 }
236 ],
237 'spaced-comment': [
238 2,
239 'always',
240 {
241 markers: [
242 'global',
243 'globals',
244 'eslint',
245 'eslint-disable',
246 '*package',
247 '!',
248 ','
249 ]
250 }
251 ],
252 'template-curly-spacing': [2, 'never'],
253 'use-isnan': 2,
254 'valid-typeof': 2,
255 'wrap-iife': [2, 'any'],
256 'yield-star-spacing': [2, 'both'],
257 yoda: [2, 'never'],
258 'prefer-const': 2,
259 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
260 'object-curly-spacing': [
261 2,
262 'always',
263 {
264 objectsInObjects: false
265 }
266 ],
267 'array-bracket-spacing': [2, 'never'],
268 'vue/html-self-closing': ["error",{
269 "html": {
270 "void": "never",
271 "normal": "any",
272 "component": "any"
273 }, 9 },
274 "svg": "always", 10 rules: {
275 "math": "always" 11 "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
276 }] 12 "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
13
277 } 14 }
278 } 15 };
......
.gitignore
1 .DS_Store 1 .DS_Store
2 node_modules/ 2 node_modules
3 dist/ 3 /dist
4
5 # local env files
6 .env.local
7 .env.*.local
8
9 # Log files
4 npm-debug.log* 10 npm-debug.log*
5 yarn-debug.log* 11 yarn-debug.log*
6 yarn-error.log* 12 yarn-error.log*
7 package-lock.json
8 tests/**/coverage/
9 13
10 # Editor directories and files 14 # Editor directories and files
11 .idea 15 .idea
...@@ -14,3 +18,4 @@ tests/**/coverage/ ...@@ -14,3 +18,4 @@ tests/**/coverage/
14 *.ntvs* 18 *.ntvs*
15 *.njsproj 19 *.njsproj
16 *.sln 20 *.sln
21 *.sw?
......
.prettierrc 0 → 100644
1 {
2 "printWidth": 120,
3 "tabWidth": 2,
4 "singleQuote": true,
5 "trailingComma": "none",
6 "semi": false,
7 "wrap_line_length": 120,
8 "wrap_attributes": "auto",
9 "proseWrap": "always",
10 "arrowParens": "avoid",
11 "bracketSpacing": false,
12 "jsxBracketSameLine": true,
13 "useTabs": false,
14 "overrides": [{
15 "files": ".prettierrc",
16 "options": {
17 "parser": "json"
18 }
19 }]
20 }
...\ No newline at end of file ...\ No newline at end of file
.travis.yml deleted 100644 → 0
1 language: node_js
2 node_js: 10
3 script: npm run test
4 notifications:
5 email: false
LICENSE deleted 100644 → 0
1 MIT License
2
3 Copyright (c) 2017-present PanJiaChen
4
5 Permission is hereby granted, free of charge, to any person obtaining a copy
6 of this software and associated documentation files (the "Software"), to deal
7 in the Software without restriction, including without limitation the rights
8 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 copies of the Software, and to permit persons to whom the Software is
10 furnished to do so, subject to the following conditions:
11
12 The above copyright notice and this permission notice shall be included in all
13 copies or substantial portions of the Software.
14
15 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 SOFTWARE.
README.md
1 # vue-h5-template 1 # vue-h5-template
2 2
3 基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架 3 基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架
4 [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看
4 5
5 #### 介绍 6 #### 介绍
6 [关于项目介绍](https://segmentfault.com/a/1190000019275330) 7 [关于项目介绍](https://segmentfault.com/a/1190000019275330)
7 8
8 1. vuecli3.0 9 - Vue-cli4
9 2. 多环境开发 10 - VantUI组件按需加载
10 3. axios封装 11 - Sass
11 4. rem适配方案 12 - Webpack 4
12 5. 生产环境cdn优化首屏加速 13 - Vuex
13 6. babel低版本浏览器兼容 14 - Axios封装
14 7. 环境发布脚本 15 - rem适配方案
16 - 多环境配置
17 - 生产环境cdn优化首屏加速
18 - babel低版本浏览器兼容
19 - Eslint+Pettier统一开发规范
15 20
16 #### 多环境 21 #### 多环境
17 22
......
babel.config.js
1 module.exports = { 1 module.exports = {
2 presets: [['@vue/app', { useBuiltIns: 'entry' }]], 2 presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
3 plugins: [ 3 plugins: [
4 [ 4 [
5 'import', 5 'import',
......
build/index.js deleted 100644 → 0
1 const { run } = require('runjs')
2 const chalk = require('chalk')
3 // const config = require('../vue.config.js')
4 const rawArgv = process.argv.slice(2)
5 const args = rawArgv.join(' ')
6
7 if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
8 const report = rawArgv.includes('--report')
9
10 run(`vue-cli-service build ${args}`)
11
12 const port = 9018
13 const publicPath = '/'
14
15 var connect = require('connect')
16 var serveStatic = require('serve-static')
17 const app = connect()
18
19 app.use(
20 publicPath,
21 serveStatic('./dist', {
22 index: ['index.html', '/']
23 })
24 )
25
26 app.listen(port, function () {
27 console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
28 if (report) {
29 console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
30 }
31
32 })
33 } else {
34 run(`vue-cli-service build ${args}`)
35 }
jest.config.js deleted 100644 → 0
1 module.exports = {
2 moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
3 transform: {
4 '^.+\\.vue$': 'vue-jest',
5 '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
6 'jest-transform-stub',
7 '^.+\\.jsx?$': 'babel-jest'
8 },
9 moduleNameMapper: {
10 '^@/(.*)$': '<rootDir>/src/$1'
11 },
12 snapshotSerializers: ['jest-serializer-vue'],
13 testMatch: [
14 '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
15 ],
16 collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
17 coverageDirectory: '<rootDir>/tests/unit/coverage',
18 // 'collectCoverage': true,
19 'coverageReporters': [
20 'lcov',
21 'text-summary'
22 ],
23 testURL: 'http://localhost/'
24 }
package-lock.json 0 → 100644
This diff could not be displayed because it is too large.
package.json
1 { 1 {
2 "name": "vue-h5-template", 2 "name": "vue-h5-template",
3 "version": "1.0.0", 3 "version": "2.0.0",
4 "description": "A vue h5 template with Vant UI", 4 "description": "A vue h5 template with Vant UI",
5 "author": "Sunnie <s406803045@163.com>", 5 "author": "Sunnie <s406803045@163.com>",
6 "license": "MIT", 6 "private": true,
7 "scripts": { 7 "scripts": {
8 "dev": "vue-cli-service serve --open", 8 "serve": "vue-cli-service serve --open",
9 "build:prod": "vue-cli-service build", 9 "build:prod": "vue-cli-service build",
10 "build:stage": "vue-cli-service build --mode staging", 10 "build:stage": "vue-cli-service build --mode staging",
11 "preview": "node build/index.js --preview", 11 "lint": "vue-cli-service lint"
12 "lint": "eslint --ext .js,.vue src",
13 "test:unit": "jest --clearCache && vue-cli-service test:unit",
14 "test:ci": "npm run lint && npm run test:unit",
15 "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
16 }, 12 },
17 "dependencies": { 13 "dependencies": {
18 "axios": "0.19.0", 14 "axios": "^0.19.2",
19 "fastclick": "^1.0.6", 15 "core-js": "^3.6.4",
20 "lib-flexible": "^0.3.2", 16 "lib-flexible": "^0.3.2",
21 "normalize.css": "7.0.0", 17 "vant": "^2.4.7",
22 "vant": "^2.2.14", 18 "vue": "^2.6.11",
23 "vue": "2.6.10", 19 "vue-router": "^3.1.5",
24 "vue-router": "3.0.6", 20 "vuex": "^3.1.2"
25 "vuex": "3.1.0"
26 }, 21 },
27 "devDependencies": { 22 "devDependencies": {
28 "@babel/core": "7.0.0", 23 "@babel/polyfill": "^7.8.3",
29 "@babel/register": "7.0.0", 24 "@vue/cli-plugin-babel": "~4.2.0",
30 "@vue/cli-plugin-babel": "3.6.0", 25 "@vue/cli-plugin-eslint": "~4.2.0",
31 "@vue/cli-plugin-eslint": "3.6.0", 26 "@vue/cli-service": "~4.2.0",
32 "@vue/cli-plugin-unit-jest": "3.6.3", 27 "@vue/eslint-config-prettier": "^6.0.0",
33 "@vue/cli-service": "3.6.0", 28 "babel-eslint": "^10.0.3",
34 "@vue/test-utils": "1.0.0-beta.29", 29 "babel-plugin-import": "^1.13.0",
35 "babel-core": "7.0.0-bridge.0", 30 "babel-plugin-transform-remove-console": "^6.9.4",
36 "babel-eslint": "10.0.1", 31 "eslint": "^6.7.2",
37 "babel-jest": "23.6.0", 32 "eslint-plugin-prettier": "^3.1.1",
38 "babel-plugin-import": "^1.11.2", 33 "eslint-plugin-vue": "^6.1.2",
39 "chalk": "2.4.2", 34 "node-sass": "^4.13.1",
40 "connect": "3.6.6",
41 "eslint": "5.15.3",
42 "eslint-plugin-vue": "5.2.2",
43 "html-webpack-plugin": "3.2.0",
44 "node-sass": "^4.9.0",
45 "postcss-pxtorem": "^4.0.1", 35 "postcss-pxtorem": "^4.0.1",
46 "runjs": "^4.3.2", 36 "prettier": "^1.19.1",
47 "sass-loader": "^7.1.0", 37 "sass-loader": "^8.0.2",
48 "script-ext-html-webpack-plugin": "2.1.3", 38 "script-ext-html-webpack-plugin": "^2.1.4",
49 "script-loader": "0.7.2", 39 "vue-template-compiler": "^2.6.11"
50 "serve-static": "^1.13.2", 40 }
51 "svgo": "1.2.2",
52 "vue-template-compiler": "2.6.10"
53 },
54 "engines": {
55 "node": ">=8.9",
56 "npm": ">= 3.0.0"
57 },
58 "browserslist": [
59 "> 1%",
60 "last 2 versions",
61 "not ie <= 8"
62 ]
63 } 41 }
......
public/favicon.ico
No preview for this file type
src/App.vue
...@@ -7,8 +7,7 @@ ...@@ -7,8 +7,7 @@
7 </div> 7 </div>
8 </template> 8 </template>
9 <script> 9 <script>
10 export default { 10 export default {
11 name: 'App' 11 name: 'App'
12 } 12 }
13
14 </script> 13 </script>
......
src/api/user.js
1 import qs from 'qs' 1 import qs from 'qs'
2 import request from '@/utils/request' 2 import request from '@/utils/request'
3 import { api } from '@/config'
4 // api 3 // api
5 const { common_api } = api
6 4
7 // 登录 5 // 登录
8 export function login(params) { 6 export function login(params) {
9 return request({ 7 return request({
10 url: common_api + '/ruleCommon/queryrule', 8 url: '/user/login',
11 method: 'post', 9 method: 'post',
12 data: qs.stringify(params) 10 data: qs.stringify(params)
13 }) 11 })
14 } 12 }
13 // 用户信息
14 export function getUserInfo(params) {
15 return request({
16 url: '/user/userinfo',
17 method: 'get',
18 data: qs.stringify(params)
19 })
20 }
......
src/assets/css/index.scss
1 @import './variables.scss'; 1 .app-container{
2 @import './mixin.scss'; 2 padding-bottom:50px
3
4 body {
5 height: 100%;
6 -moz-osx-font-smoothing: grayscale;
7 -webkit-font-smoothing: antialiased;
8 text-rendering: optimizeLegibility;
9 font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
10 }
11
12 label {
13 font-weight: 700;
14 }
15
16 html {
17 height: 100%;
18 box-sizing: border-box;
19 }
20
21 #app {
22 height: 100%;
23 }
24
25 *,
26 *:before,
27 *:after {
28 box-sizing: inherit;
29 }
30
31 a:focus,
32 a:active {
33 outline: none;
34 }
35
36 a,
37 a:focus,
38 a:hover {
39 cursor: pointer;
40 color: inherit;
41 text-decoration: none;
42 }
43
44 div:focus {
45 outline: none;
46 }
47
48 .clearfix {
49 &:after {
50 visibility: hidden;
51 display: block;
52 font-size: 0;
53 content: " ";
54 clear: both;
55 height: 0;
56 }
57 }
58
59 // main-container global css
60 .app-container {
61 padding: 20px;
62 } 3 }
...\ No newline at end of file ...\ No newline at end of file
......
src/assets/css/mixin.scss deleted 100644 → 0
1 @mixin clearfix {
2 &:after {
3 content: "";
4 display: table;
5 clear: both;
6 }
7 }
8
9 @mixin scrollBar {
10 &::-webkit-scrollbar-track-piece {
11 background: #d3dce6;
12 }
13
14 &::-webkit-scrollbar {
15 width: 6px;
16 }
17
18 &::-webkit-scrollbar-thumb {
19 background: #99a9bf;
20 border-radius: 20px;
21 }
22 }
23
24 @mixin relative {
25 position: relative;
26 width: 100%;
27 height: 100%;
28 }
src/assets/css/variables.scss deleted 100644 → 0
1 // sidebar
2 $menuText:#bfcbd9;
3 $menuActiveText:#409EFF;
4 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
5
6 $menuBg:#304156;
7 $menuHover:#263445;
8
9 $subMenuBg:#1f2d3d;
10 $subMenuHover:#001528;
11
12 $sideBarWidth: 210px;
13
14 // the :export directive is the magic sauce for webpack
15 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
16 :export {
17 menuText: $menuText;
18 menuActiveText: $menuActiveText;
19 subMenuActiveText: $subMenuActiveText;
20 menuBg: $menuBg;
21 menuHover: $menuHover;
22 subMenuBg: $subMenuBg;
23 subMenuHover: $subMenuHover;
24 sideBarWidth: $sideBarWidth;
25 }
src/components/HelloWorld.vue 0 → 100644
1 <template>
2 <div class="hello">
3 <h1>{{ msg }}</h1>
4 <p>
5 For a guide and recipes on how to configure / customize this project,<br />
6 check out the
7 <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8 </p>
9 <h3>Installed CLI Plugins</h3>
10 <ul>
11 <li>
12 <a
13 href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
14 target="_blank"
15 rel="noopener"
16 >babel</a
17 >
18 </li>
19 <li>
20 <a
21 href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
22 target="_blank"
23 rel="noopener"
24 >eslint</a
25 >
26 </li>
27 </ul>
28 <h3>Essential Links</h3>
29 <ul>
30 <li>
31 <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
32 </li>
33 <li>
34 <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
35 </li>
36 <li>
37 <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
38 </li>
39 <li>
40 <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
41 </li>
42 <li>
43 <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
44 </li>
45 </ul>
46 <h3>Ecosystem</h3>
47 <ul>
48 <li>
49 <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
50 </li>
51 <li>
52 <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
53 </li>
54 <li>
55 <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a>
56 </li>
57 <li>
58 <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
59 </li>
60 <li>
61 <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
62 </li>
63 </ul>
64 </div>
65 </template>
66
67 <script>
68 export default {
69 name: 'HelloWorld',
70 props: {
71 msg: String
72 }
73 }
74 </script>
75
76 <!-- Add "scoped" attribute to limit CSS to this component only -->
77 <style scoped>
78 h3 {
79 margin: 40px 0 0;
80 }
81 ul {
82 list-style-type: none;
83 padding: 0;
84 }
85 li {
86 display: inline-block;
87 margin: 0 10px;
88 }
89 a {
90 color: #42b983;
91 }
92 </style>
src/config/env.development.js
1 // 本地 1 // 本地
2 module.exports = { 2 module.exports = {
3 title: 'vue-h5-template', 3 title: 'vue-h5-template',
4 baseUrl: 'https://test.xxx.com', // 项目地址
5 baseApi: 'https://test.xxx.com', // 本地api请求地址
4 api: { 6 api: {
5 base_api: 'https://xxx.xxx.com/admin', 7 base_api: 'https://xxx.xxx.com/admin',
6 common_api: 'https://xxx.xxx.com/common' 8 common_api: 'https://xxx.xxx.com/common'
......
src/config/env.production.js
1 // 正式 1 // 正式
2 module.exports = { 2 module.exports = {
3 title: 'vue-h5-template', 3 title: 'vue-h5-template',
4 baseUrl: 'https://www.xxx.com/', // 正式项目地址
5 baseApi: 'https://test.xxx.com', // 正式api请求地址
4 api: { 6 api: {
5 base_api: 'https://xxx.xxx.com/admin', 7 base_api: 'https://xxx.xxx.com/admin',
6 common_api: 'https://xxx.xxx.com/common' 8 common_api: 'https://xxx.xxx.com/common'
......
src/config/env.staging.js
1 module.exports = { 1 module.exports = {
2 title: 'vue-h5-template', 2 title: 'vue-h5-template',
3 baseUrl: 'https://test.xxx.com', // 测试项目地址
4 baseApi: 'https://test.xxx.com', // 测试api请求地址
3 api: { 5 api: {
4 base_api: 'https://xxx.xxx.com/admin', 6 base_api: 'https://xxx.xxx.com/admin',
5 common_api: 'https://xxx.xxx.com/common' 7 common_api: 'https://xxx.xxx.com/common'
......
src/config/index.js
1 // 根据环境引入不同配置 process.env.NODE_ENV 1 // 根据环境引入不同配置 process.env.NODE_ENV
2 const config = require('./env.' + process.env.VUE_APP_ENV) 2 const config = require('./env.' + process.env.VUE_APP_ENV)
3 module.exports = config 3 module.exports = config
......
src/main.js
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import 'normalize.css/normalize.css' // A modern alternative to CSS resets 2 import App from './App.vue'
3 import '@/assets/css/index.scss' // global css 3 import router from './router'
4 import store from './store'
5 // 引入全局样式
6 import '@/assets/css/index.scss'
7
8 // 全局引入按需引入UI库 vant
9 import '@/plugins/vant'
10 // IE 兼容
11 import '@babel/polyfill'
4 // 移动端适配 12 // 移动端适配
5 import 'lib-flexible/flexible.js' 13 import 'lib-flexible/flexible.js'
6 import App from './App' 14
7 import store from './store' 15 // filters
8 import router from './router' 16 import './filters'
9 import '@/filters' // filters
10 import '@/permission' // permission 权限
11 // 解决移动端click事件300毫秒延迟方法
12 import FastClick from 'fastclick'
13 if ('addEventListener' in document) {
14 document.addEventListener(
15 'DOMContentLoaded',
16 function() {
17 FastClick.attach(document.body)
18 },
19 false
20 )
21 }
22 Vue.config.productionTip = false 17 Vue.config.productionTip = false
18
23 new Vue({ 19 new Vue({
24 el: '#app', 20 el: '#app',
25 router, 21 router,
......
src/permission.js deleted 100644 → 0
1 import router from './router'
2
3 router.beforeEach(async(to, from, next) => {
4 next()
5 })
6 router.afterEach(() => {})
src/plugins/vant.js 0 → 100644
1 // 按需全局引入 vant组件
2 import Vue from 'vue'
3 import {Button, List, Cell, Tabbar, TabbarItem} from 'vant'
4 Vue.use(Button)
5 Vue.use(Cell)
6 Vue.use(List)
7 Vue.use(Tabbar).use(TabbarItem)
src/router/index.js
...@@ -2,9 +2,10 @@ import Vue from 'vue' ...@@ -2,9 +2,10 @@ import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 3
4 Vue.use(Router) 4 Vue.use(Router)
5 export const constantRoutes = [ 5 export const router = [
6 { 6 {
7 path: '/', 7 path: '/',
8 name: 'index',
8 component: () => import('@/views/home/index'), 9 component: () => import('@/views/home/index'),
9 meta: { 10 meta: {
10 keepAlive: false 11 keepAlive: false
...@@ -14,10 +15,10 @@ export const constantRoutes = [ ...@@ -14,10 +15,10 @@ export const constantRoutes = [
14 15
15 const createRouter = () => 16 const createRouter = () =>
16 new Router({ 17 new Router({
17 mode: 'history', // require service support 18 // mode: 'history', // 如果你是 history模式 需要配置vue.config.js publicPath
18 base: '/app/', 19 // base: '/app/',
19 scrollBehavior: () => ({ y: 0 }), 20 scrollBehavior: () => ({y: 0}),
20 routes: constantRoutes 21 routes: router
21 }) 22 })
22 23
23 export default createRouter() 24 export default createRouter()
......
src/store/getters.js
1 const getters = { 1 const getters = {
2 userName: state => state.app.userName
2 } 3 }
3 export default getters 4 export default getters
......
src/store/modules/app.js
1 const state = { 1 const state = {
2 2 userName: ''
3 } 3 }
4
5 const mutations = { 4 const mutations = {
6 5 SET_USER_NAME(state, name) {
6 state.userName = name
7 }
7 } 8 }
8
9 const actions = { 9 const actions = {
10 10 // 设置name
11 setUserName({commit}, name) {
12 commit('SET_USER_NAME', name)
13 }
11 } 14 }
12
13 export default { 15 export default {
14 namespaced: true, 16 namespaced: true,
15 state, 17 state,
......
src/utils/request.js
1 import axios from 'axios' 1 import axios from 'axios'
2 import store from '@/store' 2 import store from '@/store'
3 import { Toast } from 'vant' 3 import {Toast} from 'vant'
4 import { api } from '@/config' 4 // 根据环境不同引入不同api地址
5 import {baseApi} from '@/config'
5 // create an axios instance 6 // create an axios instance
6 const service = axios.create({ 7 const service = axios.create({
7 baseURL: api.base_api, // url = base url + request url 8 baseURL: baseApi, // url = base api url + request url
8 withCredentials: true, // send cookies when cross-domain requests 9 withCredentials: true, // send cookies when cross-domain requests
9 timeout: 5000 // request timeout 10 timeout: 5000 // request timeout
10 }) 11 })
......
src/views/home/index.vue
1 <!-- home --> 1 <!-- home -->
2 <template> 2 <template>
3 <div> 3 <div class="app-container">
4 <h1>home</h1> 4 <div class="warpper">
5 <van-button type="primary">主要按钮</van-button> 5 <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span>VUE H5开发模板</span></h1>
6 <h2 class="demo-home__desc">
7 A vue h5 template with Vant UI
8 </h2>
9 </div>
10 <van-cell icon="success" v-for="item in list" :key="item" :title="item" />
11 <van-tabbar fixed v-model="active" @change="onChange">
12 <van-tabbar-item icon="home-o">首页</van-tabbar-item>
13 <van-tabbar-item icon="good-job-o">github</van-tabbar-item>
14 </van-tabbar>
6 </div> 15 </div>
7 </template> 16 </template>
8 17
9 <script> 18 <script>
10 // import { api } from '@/config' 19 // 请求接口
11 import { 20 import {getUserInfo} from '@/api/user.js'
12 Button
13 } from 'vant'
14 export default { 21 export default {
15 components: { 22 components: {},
16 'van-button': Button
17 },
18 23
19 data () { 24 data() {
20 return {} 25 return {
26 active: 0,
27 list: [
28 'Vue-cli4',
29 'VantUI组件按需加载',
30 'Sass',
31 'Webpack 4',
32 'Vue-router',
33 'Vuex',
34 'Axios封装',
35 'rem适配方案',
36 '多环境配置',
37 '生产环境cdn优化首屏加速',
38 'babel低版本浏览器兼容',
39 'Eslint+Pettier统一开发规范'
40 ]
41 }
21 }, 42 },
22 43
23 computed: {}, 44 computed: {},
24 45
25 mounted () { 46 mounted() {
26 console.log(process.env) 47 this.initData()
27 }, 48 },
28 49
29 methods: {} 50 methods: {
51 // 请求数据案例
52 initData() {
53 // 请求接口数据，仅作为展示，需要配置src->config下环境文件
54 getUserInfo()
55 .then(() => {})
56 .catch(() => {})
57 },
58 onChange(index) {
59 if (index === 1) window.location.href = 'https://github.com/sunnie1992/vue-h5-template'
60 }
61 }
30 } 62 }
31
32 </script> 63 </script>
33 <style lang='scss' scoped> 64 <style lang="scss" scoped>
34 h1 { 65 .app-container {
35 background: red; 66 .warpper {
36 width: 375px; 67 padding: 12px;
68 .demo-home__title {
69 margin: 0 0 6px;
70 font-size: 32px;
71 .demo-home__title img,
72 .demo-home__title span {
73 display: inline-block;
74 vertical-align: middle;
75 }
76 img {
77 width: 32px;
78 }
79 span {
80 margin-left: 16px;
81 font-weight: 500;
82 }
83 }
84 .demo-home__desc {
85 margin: 0 0 20px;
86 color: rgba(69, 90, 100, 0.6);
87 font-size: 14px;
88 }
89 }
37 } 90 }
38 </style> 91 </style>
......
vue.config.js
...@@ -4,7 +4,6 @@ const defaultSettings = require('./src/config/index.js') ...@@ -4,7 +4,6 @@ const defaultSettings = require('./src/config/index.js')
4 function resolve(dir) { 4 function resolve(dir) {
5 return path.join(__dirname, dir) 5 return path.join(__dirname, dir)
6 } 6 }
7
8 const name = defaultSettings.title || 'vue mobile template' // page title 7 const name = defaultSettings.title || 'vue mobile template' // page title
9 const port = 9018 // dev port 8 const port = 9018 // dev port
10 const externals = { 9 const externals = {
...@@ -19,13 +18,12 @@ const cdn = { ...@@ -19,13 +18,12 @@ const cdn = {
19 // 开发环境 18 // 开发环境
20 dev: { 19 dev: {
21 css: [], 20 css: [],
22 js: ['https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js'] 21 js: []
23 }, 22 },
24 // 生产环境 23 // 生产环境
25 build: { 24 build: {
26 css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'], 25 css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'],
27 js: [ 26 js: [
28 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js',
29 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js', 27 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js',
30 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js', 28 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js',
31 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js', 29 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js',
...@@ -36,7 +34,8 @@ const cdn = { ...@@ -36,7 +34,8 @@ const cdn = {
36 } 34 }
37 } 35 }
38 module.exports = { 36 module.exports = {
39 publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', // 需要区分生产环境和开发环境，不然build会报错 37 publicPath: './', // router hash 模式使用
38 // publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', //router history模式使用 需要区分生产环境和开发环境，不然build会报错
40 outputDir: 'dist', 39 outputDir: 'dist',
41 assetsDir: 'static', 40 assetsDir: 'static',
42 lintOnSave: process.env.NODE_ENV === 'development', 41 lintOnSave: process.env.NODE_ENV === 'development',
...@@ -60,8 +59,8 @@ module.exports = { ...@@ -60,8 +59,8 @@ module.exports = {
60 }) 59 })
61 } 60 }
62 // 为开发环境修改配置... 61 // 为开发环境修改配置...
63 if (process.env.NODE_ENV === 'development') { 62 // if (process.env.NODE_ENV === 'development') {
64 } 63 // }
65 }, 64 },
66 chainWebpack(config) { 65 chainWebpack(config) {
67 config.plugins.delete('preload') // TODO: need test 66 config.plugins.delete('preload') // TODO: need test
...@@ -70,8 +69,10 @@ module.exports = { ...@@ -70,8 +69,10 @@ module.exports = {
70 config.resolve.alias 69 config.resolve.alias
71 .set('@', resolve('src')) 70 .set('@', resolve('src'))
72 .set('assets', resolve('src/assets')) 71 .set('assets', resolve('src/assets'))
72 .set('api', resolve('src/api'))
73 .set('views', resolve('src/views')) 73 .set('views', resolve('src/views'))
74 .set('components', resolve('src/components')) 74 .set('components', resolve('src/components'))
75
75 /** 76 /**
76 * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改 77 * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改
77 */ 78 */
...@@ -114,23 +115,18 @@ module.exports = { ...@@ -114,23 +115,18 @@ module.exports = {
114 config.optimization.splitChunks({ 115 config.optimization.splitChunks({
115 chunks: 'all', 116 chunks: 'all',
116 cacheGroups: { 117 cacheGroups: {
117 libs: {
118 name: 'chunk-libs',
119 test: /[\\/]node_modules[\\/]/,
120 priority: 10,
121 chunks: 'initial' // only package third parties that are initially dependent
122 },
123 // elementUI: {
124 // name: 'chunk-elementUI', // split elementUI into a single package
125 // priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
126 // test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
127 // },
128 commons: { 118 commons: {
129 name: 'chunk-commons', 119 name: 'chunk-commons',
130 test: resolve('src/components'), // can customize your rules 120 test: resolve('src/components'), // can customize your rules
131 minChunks: 3, // minimum common number 121 minChunks: 3, // minimum common number
132 priority: 5, 122 priority: 5,
133 reuseExistingChunk: true 123 reuseExistingChunk: true
124 },
125 libs: {
126 name: 'chunk-libs',
127 chunks: 'initial', // only package third parties that are initially dependent
128 test: /[\\/]node_modules[\\/]/,
129 priority: 10
134 } 130 }
135 } 131 }
136 }) 132 })
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!