7fec4592 by simon

默认提交

0 parents
1 > 1%
2 last 2 versions
1 root = true;
2
3 [*]
4 # indent_style = tab
5 indent_style = space
6 # indent_size = 4
7 indent_size = 2
8 tab_width = 2
9 end_of_line = lf
10 trim_trailing_whitespace = true
11 insert_final_newline = true
12
13 # [*.{json,yml,wxml,html}]
14 # indent_style = tab
15 # indent_size = 4
16 # tab_width = 2
17
18
19 [README.md]
20 trim_trailing_whitespace = ignore
1 NODE_ENV = 'production'
2 VUE_APP_TITLE = 'production'
...\ No newline at end of file ...\ No newline at end of file
1 NODE_ENV = 'production'
2 VUE_APP_TITLE = 'sandbox'
1 module.exports = {
2 root: true,
3 env: {
4 node: true
5 },
6 'extends': [
7 'plugin:vue/essential',
8 // 'eslint:recommended'
9 ],
10 rules: {
11 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 "no-unused-vars": 'off'
14 },
15 parserOptions: {
16 parser: 'babel-eslint'
17 }
18 }
1 .DS_Store
2 node_modules
3 /dist
4 /fev
5
6 # local env files
7 .env.local
8 .env.*.local
9
10 # Log files
11 npm-debug.log*
12 yarn-debug.log*
13 yarn-error.log*
14
15 # Editor directories and files
16 .idea
17 .vscode
18 *.suo
19 *.ntvs*
20 *.njsproj
21 *.sln
22 *.sw?
1 # vue-cli3-framework
2
3 ## Project setup
4 ```
5 npm install
6 ```
7
8 ### Compiles and hot-reloads for development
9 ```
10 npm run serve
11 ```
12
13 ### Compiles and minifies for production
14 ```
15 npm run build
16 ```
17
18 ### Run your tests
19 ```
20 npm run test
21 ```
22
23 ### Lints and fixes files
24 ```
25 npm run lint
26 ```
27
28 ### Customize configuration
29 See [Configuration Reference](https://cli.vuejs.org/config/).
1 module.exports = {
2 presets: [
3 '@vue/app'
4 ],
5 plugins: [
6 ['import', {
7 libraryName: 'vant',
8 libraryDirectory: 'es',
9 style: true
10 }, 'vant']
11 ]
12 }
...\ No newline at end of file ...\ No newline at end of file
1 /**
2 * Created by pc on 2018/5/11.
3 * 需要的库为(co, ali-oss, glob)
4 * npm i co ali-oss glob --save
5 * ossConfig.json格式如下
6 {
7 "region": "oss-cn-shanghai", //OSS region
8 "accessKeyId": "XXXXXXXX", //OSS accessKeyId
9 "accessKeySecret": "XXXXXXXX", //OSS accessKeySecret
10 "bucket": "ogo", //OSS bucket
11 "localPath": "./dist/**", //本地需要上传的文件目录,(/**)为遍历根号后所有目录
12 "ossPath": "/mobile/", //oss线上文件目录(不能为根目录,避免误操作,最后加上'/')
13 "callbackUrl": "http://nodejs.org/dist/index.json" //预留请求服务器更新缓存的API
14 }
15 *
16 *
17 */
18
19 let co = require('co')
20 let OSS = require('ali-oss')
21 let glob = require('glob')
22 let http = require('http')
23 let Config = require('./ossConfig.json')
24
25 // 配置oss信息
26 let client = new OSS({
27 region: Config.region,
28 accessKeyId: Config.accessKeyId,
29 accessKeySecret: Config.accessKeySecret,
30 bucket: Config.bucket
31 })
32
33 // 删除线上目录
34 function deleteFiles() {
35 if (Config.ossPath !== '' && Config.ossPath !== '/') {
36 co(function* () {
37 let result = yield client.list({
38 prefix: Config.ossPath.slice(1, -1),
39 marker: Config.ossPath.slice(0, -1)
40 })
41 let index = 0
42 if (result.objects !== undefined) {
43 yield result.objects.map(i => {
44 co(function* () {
45 yield client.delete(i.name)
46 index += 1
47 if (index === result.objects.length) {
48 console.log(`全部删除成功~,总共${result.objects.length}个文件`)
49 uploadFiles()
50 }
51 })
52 })
53 } else {
54 uploadFiles()
55 }
56 }).catch(function (err) {
57 console.log(err)
58 })
59 } else {
60 console.error('上传失败,线上路径为根目录~')
61 }
62 }
63
64 function uploadFiles() {
65 // 遍历目录树之后上传
66 glob(Config.localPath, {
67 nodir: true
68 }, (er, files) => {
69 let index = 0
70 files.map(i => {
71 co(function* () {
72 let ossPath = Config.ossPath.substr(Config.ossPath.length - 1, 1) === '/' ? Config.ossPath.slice(0, -1) : Config.ossPath
73 yield client.put(ossPath + i.slice(6), i)
74 index += 1
75 if (index === files.length) {
76 consoleStr(files.length)
77 }
78 }).catch(function (err) {
79 console.error(err.params.object)
80 })
81 })
82 })
83 }
84
85 function consoleStr(length) {
86 console.log(`全部上传成功~,总共${length}个文件`)
87 // http.get(Config.callbackUrl, () => {
88 // console.log('更新缓存成功~')
89 // }).on('error', (e) => {
90 // console.error(`错误: ${e.message}`)
91 // })
92 }
93
94 // 清空目录后上传
95 // deleteFiles()
96
97 // 增量上传
98 uploadFiles()
...\ No newline at end of file ...\ No newline at end of file
1
2 {
3 "region": "oss-cn-shenzhen",
4 "accessKeyId": "LTAIhDZsL5yCN90c",
5 "accessKeySecret": "LIj3OEJ8cMCQeRlUVVznJpMek2dPD2",
6 "bucket": "kdcdn",
7 "localPath": "./dist/**",
8 "ossPath": "/app/rtdn/",
9 "callbackUrl": "http://nodejs.org/dist/index.json"
10 }
11
...\ No newline at end of file ...\ No newline at end of file
1 # chmod u+x git.sh
2 unset msg
3
4 read -p "请输入commit提交的描述: " msg
5
6 if [[ $msg == "" ]]; then
7 msg="默认提交"
8 fi
9 git add -A
10 git commit -m $msg
11 git push
12 git status
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
1 {
2 "name": "vue-cli3-vant-framework",
3 "version": "0.1.0",
4 "private": true,
5 "scripts": {
6 "serve": "vue-cli-service serve",
7 "dev": "vue-cli-service serve",
8 "build": "vue-cli-service build",
9 "sandbox": "vue-cli-service build --mode sandbox",
10 "lint": "vue-cli-service lint",
11 "oss": "node build/oss-released.js"
12 },
13 "dependencies": {
14 "ali-oss": "^6.1.1",
15 "amfe-flexible": "^2.2.1",
16 "axios": "^0.19.0",
17 "axios-mock-adapter": "^1.16.0",
18 "co": "^4.6.0",
19 "core-js": "^2.6.5",
20 "glob": "^7.1.4",
21 "mockjs": "^1.0.1-beta3",
22 "postcss-px2rem": "^0.3.0",
23 "postcss-pxtorem": "^4.0.1",
24 "vant": "^1.6.21",
25 "vue": "^2.6.10",
26 "vue-router": "^3.0.3",
27 "vuex": "^3.0.1"
28 },
29 "devDependencies": {
30 "@vue/cli-plugin-babel": "^3.8.0",
31 "@vue/cli-plugin-eslint": "^3.8.0",
32 "@vue/cli-service": "^3.8.0",
33 "babel-eslint": "^10.0.1",
34 "babel-plugin-import": "^1.12.0",
35 "eslint": "^5.16.0",
36 "eslint-plugin-vue": "^5.0.0",
37 "node-sass": "^4.12.0",
38 "sass-loader": "^7.1.0",
39 "vue-template-compiler": "^2.6.10"
40 }
41 }
1 const AutoPrefixer = require("autoprefixer");
2 const px2rem = require("postcss-px2rem");
3 module.exports = ({
4 file
5 }) => {
6 let remUnit;
7 // file.dirname是绝对地址,所以项目名,文件目录不能带 'vant'
8 if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
9 remUnit = 37.5;
10 } else {
11 remUnit = 75;
12 }
13 return {
14 plugins: [px2rem({
15 remUnit: remUnit,
16 }), AutoPrefixer({
17 browsers: ["last 20 versions", "android >= 4.0"]
18 })]
19 };
20 };
No preview for this file type
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
8 <meta name="viewport"
9 content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
10 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
11 <title>vue-cli3-framework</title>
12 </head>
13
14 <body>
15 <noscript>
16 <strong>We're sorry but vue-cli3-framework doesn't work properly without JavaScript enabled. Please enable it to
17 continue.</strong>
18 </noscript>
19 <div id="app"></div>
20 <!-- built files will be auto injected -->
21 </body>
22
23 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div id="app">
3 <!-- <div id="nav">
4 <router-link to="/">Home</router-link> |
5 <router-link to="/about">About</router-link>
6 </div>-->
7 <router-view/>
8 </div>
9 </template>
10
11 <style lang="scss">
12 @import "@/styles/_support";
13
14 #app {
15 /* font-family: 'Avenir', Helvetica, Arial, sans-serif;
16 -webkit-font-smoothing: antialiased;
17 -moz-osx-font-smoothing: grayscale;
18 text-align: center;
19 color: #2c3e50;
20 margin-top: 60px; */
21 border: 0;
22 margin: 0;
23 padding: 0;
24 font-size: 20px;
25 }
26
27 body,
28 div {
29 border: 0;
30 margin: 0;
31 padding: 0;
32 }
33
34 .app__width {
35 width: 750px;
36 }
37
38 .app__inner {
39 margin: 20px;
40 }
41
42 .app__title {
43 font-size: $fontSize;
44 line-height: $fontSize + 4px;
45 font-weight: bold;
46 padding-bottom: 10px;
47 margin-bottom: 20px;
48 border-bottom: 0.5px solid #eeeeee;
49 }
50
51 .app__desc {
52 font-size: $fontSizeSmaller;
53 line-height: $fontSizeSmaller + 2px;
54 margin-bottom: 20px;
55 color: $colorGray;
56 }
57
58 .app__bgc {
59 position: fixed;
60 background-color: #ffffff;
61 width: 100%;
62 height: 100%;
63 }
64
65 .app__bg {
66 position: absolute;
67 width: 100%;
68 height: 100%;
69 }
70
71 .app__top-shadow {
72 position: fixed;
73 width: 750px;
74 height: 1px;
75 box-shadow: 0px 4px 0.9px 0.1px rgba(6, 0, 1, 0.07);
76 background-color: #ffffff;
77 }
78
79 .app__content {
80 position: relative;
81 }
82
83 // index页面
84 .page-index {
85 .van-swipe__indicator {
86 width: 20px;
87 height: 20px;
88 }
89 }
90 </style>
1 module.exports = {
2 testListGet: '/xxx/xxx/list'
3 }
...\ No newline at end of file ...\ No newline at end of file
1 import axios from 'axios';
2 // import {
3 // Toast
4 // } from 'vant';
5
6 function Toast(msg) {
7 console.log("msg:", msg);
8 }
9
10 // axios的默认url
11 // axios.defaults.baseURL = ""
12
13 // 服务器地址
14 let base = "https://ow.go.qudone.com";
15 if (location.href.indexOf("//k.wxpai.cn") > 0) {
16 base = "https://api.k.wxpai.cn/bizproxy"
17 }
18 // let base = COM.baseUrl;
19
20 // 请求拦截器
21 // axios.interceptors.request.use(
22 // config => {
23 // // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
24 // // 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
25 // const token = "token"; //这里写入token
26 // token && (config.headers.Authorization = token);
27 // return config;
28 // },
29 // error => {
30 // return Promise.error(error);
31 // })
32
33 // 响应拦截器
34 axios.interceptors.response.use(
35 response => {
36 if (response.status === 200) {
37 if (response.data.code === 200) {
38 return Promise.resolve(response);
39 } else {
40 Toast(response.data.bizMsg);
41 return Promise.reject(response);
42 }
43 } else {
44 return Promise.reject(response);
45 }
46 },
47 // 服务器状态码不是200的情况
48 error => {
49 if (error.response.status) {
50 switch (error.response.status) {
51 // 401: 未登录
52 // 未登录则跳转登录页面,并携带当前页面的路径
53 // 在登录成功后返回当前页面,这一步需要在登录页操作。
54 case 401:
55 router.replace({
56 path: '/login',
57 query: {
58 redirect: router.currentRoute.fullPath
59 }
60 });
61 break;
62 // 403 token过期
63 // 登录过期对用户进行提示
64 // 清除本地token和清空vuex中token对象
65 // 跳转登录页面
66 case 403:
67 Toast({
68 message: '登录过期,请重新登录',
69 duration: 1000,
70 forbidClick: true
71 });
72 // 清除token
73 localStorage.removeItem('token');
74 store.commit('loginSuccess', null);
75 // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
76 setTimeout(() => {
77 router.replace({
78 path: '/login',
79 query: {
80 redirect: router.currentRoute.fullPath
81 }
82 });
83 }, 1000);
84 break;
85 // 404请求不存在
86 case 404:
87 Toast({
88 message: '网络请求不存在',
89 duration: 1500,
90 forbidClick: true
91 });
92 break;
93 // 其他错误,直接抛出错误提示
94 default:
95 Toast({
96 message: error.response.data.message,
97 duration: 1500,
98 forbidClick: true
99 });
100 }
101 return Promise.reject(error.response);
102 }
103 }
104 );
105
106 //formDataHeaders设置
107 let formDataHeaders = {
108 headers: {
109 "Content-Type": "multipart/form-data"
110 }
111 }
112
113 /**
114 * 封装get方法
115 * @param {*} params
116 */
117 export const httpGet = params => {
118 let {
119 url,
120 data
121 } = params;
122 return axios.get(`${base}${url}`, {
123 params: data
124 }).then(res => res.data.content);
125 }
126
127 /**
128 * 封装post方法
129 * @param {*} params
130 */
131 export const httpPost = params => {
132 let {
133 url,
134 data
135 } = params;
136 return axios.post(`${base}${url}`, data).then(res => res.data.content);
137 }
138
139
140 /**
141 * 封装post方法
142 * @param {*} params
143 * data数据是 formdata格式
144 * 例如:
145 * this.file = file
146 let data = new FormData() //使用formData对象
147 data.append('path', '/pro/mzczcradmin/')
148 data.append('file', file.file)
149 */
150 export const formdata = params => {
151 let {
152 url,
153 data
154 } = params;
155 return axios.post(`${base}${url}`, data, formDataHeaders).then(res => res.data);
156 }
...\ No newline at end of file ...\ No newline at end of file
1 import * as api from './api';
2
3 export default api;
1 // @font-face {
2 // font-family: 'vivo-BoldExtended';
3 // src: url('./vivo-BoldExtended.ttf');
4 // font-weight: normal;
5 // font-style: normal;
6 // }
7 // @font-face {
8 // font-family: 'vivo-Regular';
9 // src: url('./vivo-Regular.ttf');
10 // font-weight: normal;
11 // font-style: normal;
12 // }
13 // @font-face {
14 // font-family: 'regular2';
15 // src: url('./regular2.otf');
16 // font-weight: normal;
17 // font-style: normal;
18 // }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="bottom-tips" v-if="visb">
3 <div class="line"></div>
4 <div class="tips-wrap">
5 <div class="tips">{{innerText ? innerText :'我是有底线的'}}</div>
6 </div>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 props: ['visb', 'innerText'],
13 data() {
14 return {
15 key: 'value'
16 }
17 },
18 created() {
19 console.log('visb:', this.visb)
20 }
21 }
22 </script>
23
24 <style lang="less" scoped>
25 /// 底线
26 .bottom-tips {
27 position: relative;
28 padding: 40px 0;
29 width: 100%;
30 text-align: center;
31 color: #666666;
32
33 .line {
34 border-bottom: dashed 1px #cccccc;
35 width: 80%;
36 position: absolute;
37 top: 50%;
38 left: 0;
39 right: 0;
40 margin: 0 auto;
41 }
42
43 .tips-wrap {
44 font-size: 28px;
45 display: flex;
46 justify-content: center;
47 .tips {
48 position: relative;
49 padding: 0 20px;
50 background-color: #ffffff;
51 }
52 }
53 }
54 </style>
1 <template>
2 <div class="empty-tips" v-if="visb">
3 <div class="tips">
4 <span class="iconfont iconempty"></span>
5 <div class="tips">{{innerText ? innerText :'这里空空如也~'}}</div>
6 </div>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 props: ['visb', 'innerText'],
13 data() {
14 return {
15 key: 'value'
16 }
17 }
18 }
19 </script>
20
21 <style lang="scss" scoped>
22 .empty-tips {
23 box-sizing: border-box;
24 position: fixed;
25 text-align: center;
26 color: #666666;
27 font-size: 32px;
28 width: 100%;
29 height: 100%;
30 display: flex;
31 justify-content: center;
32 top: 35%;
33
34 .iconfont {
35 font-size: 100px;
36 }
37
38 .tips {
39 position: relative;
40 padding: 20px;
41 }
42 }
43 </style>
1 // 全局事件
2 module.exports = {
3 NAV_FILTER: '_nav_filter', // 导航菜单过滤,触发请求
4 TAB_SELECT: '_tab_select', // 选择tab ,主题 classify
5 EVT_SET_TAB_INDEX: '_evt_set_tab_index', // 选择tab ,主题 classify
6 EVT_TAB_INDEX_CHANGE: '_evt_tab_index_change', // 从navbar发至index 点击头部导航 index
7 }
8
...\ No newline at end of file ...\ No newline at end of file
1 import Vue from 'vue'
2 import App from './App.vue'
3 import router from './router'
4 import store from './store'
5
6 import Mock from './mock'
7 Mock.bootstrap();
8
9 import 'amfe-flexible/index.js'
10
11 Vue.config.productionTip = false
12
13 import {
14 Swipe,
15 SwipeItem,
16 Lazyload
17 } from 'vant';
18
19 Vue.use(Swipe).use(SwipeItem);
20 Vue.use(Lazyload);
21
22 new Vue({
23 router,
24 store,
25 data: {
26 isInit: false,
27 },
28 render: h => h(App)
29 }).$mount('#app')
1 import Mock from 'mockjs';
2 const LoginUsers = [
3 {
4 id: 1,
5 username: 'admin',
6 password: 'admin',
7 avatar: 'https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png',
8 name: '张某某'
9 }
10 ];
11
12 const Users = [];
13
14 for (let i = 0; i < 5; i++) {
15 Users.push(Mock.mock({
16 id: Mock.Random.guid(),
17 province: Mock.Random.province(),
18 city: Mock.Random.city(),
19 fieldName: Mock.Random.cname(),
20 address: Mock.mock('@county(true)'),
21 'age|18-60': 1,
22 birth: Mock.Random.date(),
23 sex: Mock.Random.integer(0, 1)
24 }));
25 }
26
27 export { LoginUsers, Users };
1 import mock from './mock';
2
3 export default mock;
1 import axios from 'axios';
2 import MockAdapter from 'axios-mock-adapter';
3 import {
4 LoginUsers,
5 Users
6 } from './data/user';
7 let _Users = Users;
8
9 export default {
10 /**
11 * mock bootstrap
12 */
13 bootstrap() {
14 return;
15 // 紧在dev环境下使用
16 if (process.env.NODE_ENV !== "development") {
17 return;
18 }
19 let mock = new MockAdapter(axios);
20
21 // mock success request
22 mock.onGet('/success').reply(200, {
23 msg: 'success'
24 });
25
26 // mock error request
27 mock.onGet('/error').reply(500, {
28 msg: 'failure'
29 });
30
31 // 拦截 get方法demo
32 mock.onGet('/path1/path2/getdemo').reply(config => {
33 // 拦截参数
34 let {
35 params1,
36 params2
37 } = config.params;
38 return new Promise((resolve, reject) => {
39 let content = {};
40 let success = true;
41 resolve([200, {
42 code: 2000,
43 msg: '请求成功',
44 success,
45 content
46 }]);
47 });
48 });
49
50 // 拦截post方法demo
51 mock.onPost('/path1/path2/postdemo').reply(config => {
52 let {
53 params1,
54 params2
55 } = JSON.parse(config.data);
56 return new Promise((resolve, reject) => {
57 let content = {};
58 let success = true;
59 resolve([200, {
60 code: 2000,
61 msg: '请求成功',
62 success,
63 content
64 }]);
65 });
66 });
67
68 }
69 };
1 <template>
2 <div class="about">
3 <div>This is an about page</div>
4 <van-button type="default">默认按钮</van-button>
5 <div class="ccc"></div>
6 </div>
7 </template>
8
9 <script>
10 import { Button } from 'vant'
11 export default {
12 name: 'about',
13 components: {
14 [Button.name]: Button
15 }
16 }
17 </script>
18
19 <style lang="scss" scoped>
20 .about{
21 font-size: 32px;
22 }
23 .ccc{
24 width: 746px;
25 height: 300px;
26 background-color: wheat;
27 }
28 </style>
29
1 <template>
2 <div class="home">home</div>
3 </template>
4
5 <script>
6 export default {
7 name: 'home'
8 }
9 </script>
10
11 <style lang="scss" scoped>
12 .home {
13 text-align: center;
14 }
15 </style>
1 import api from '../../api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '../../api/fetch-api.js'
6
7 export default {
8 data() {
9 return {
10 key: 'value'
11 }
12 },
13 components: {},
14 methods: {
15 initData() {}
16 },
17 mounted() {},
18 created() {}
19 }
...\ No newline at end of file ...\ No newline at end of file
1 @import './../../styles/support';
1
2 <template>
3 <div class="page">
4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div>
6 <div class="app__content main">
7 <div class="top-space"></div>
8 <div class="content">
9 </div>
10 </div>
11 </div>
12 </template>
13
14 <script src="./demo.js"></script>
15 <style lang="scss" scoped>
16 @import "./demo.scss";
17 </style>
...\ No newline at end of file ...\ No newline at end of file
1 import api from '../../api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '../../api/fetch-api.js'
6
7 export default {
8 data() {
9 return {
10 key: 'value',
11 images: [
12 'https://img.yzcdn.cn/vant/apple-1.jpg',
13 'https://img.yzcdn.cn/vant/apple-2.jpg'
14 ]
15 }
16 },
17 components: {},
18 methods: {
19 initData() {}
20 },
21 mounted() {},
22 created() {}
23 }
1 @import '@/styles/_support';
2
3 .page {}
4
5 .bgc {}
6
7 // 轮播banner
8 .banner {
9 background-color: #f2f2f2;
10 @extend .bb;
11 width: $screenWidth;
12
13
14 .swiper {
15 width: $screenWidth;
16 height: 400px;
17
18 .img {
19 width: $screenWidth;
20 height: 400px;
21 }
22 }
23 }
24
25 // 类别选择
26 .sel {
27 margin: 56px auto 0;
28 display: flex;
29 justify-content: center;
30
31 &-item {
32 @extend .fcc;
33 // @extend .bb;
34 text-align: center;
35 // padding: 0 12px;
36 margin: 0 22px;
37 color: #ffffff;
38 width: 92px;
39 height: 92px;
40 border-radius: 92px;
41 background-color: #ffcc33;
42 }
43
44 &-item-1 {}
45
46 &-item-2 {
47 background-color: #ffcccc;
48 }
49
50 &-item-3 {
51 background-color: #cc9999;
52 }
53
54 &-item-4 {
55 background-color: #cccc99;
56 }
57
58 &-item-5 {
59 background-color: #ffcc99;
60 }
61 }
62
63 // 产品推荐
64 .product {
65 margin: 72px auto 0;
66 width: $contentWidth;
67
68 &-title {
69 text-align: center;
70 font-size: 32px;
71 color: #c78f8f;
72 }
73
74 &-list {
75 margin-top: 20px;
76 display: flex;
77 flex-wrap: wrap;
78 justify-content: space-between;
79
80 $itemWid: 330px;
81
82 .item {
83 width: $itemWid;
84 // height: 440px;
85 background: #F8F8F8;
86 border-radius: 4px;
87 margin-bottom: 32px;
88 padding-bottom: 12px;
89
90 .image {
91 width: $itemWid;
92 height: $itemWid;
93 }
94
95 .desc {
96 @extend .bb;
97 width: 325px;
98 padding: 4px 20px;
99 font-size: 24px;
100 // line-height: 32px;
101 color: #333333;
102 // @include ellipsis(3);
103 }
104 }
105 }
106 }
1
2 <template>
3 <div class="page page-index">
4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div>
6 <div class="app__content main">
7 <div class="top-space"></div>
8 <!-- 轮播banner -->
9 <div class="banner">
10 <van-swipe indicator-color="#ffcc00" class="swiper" :autoplay="3000">
11 <van-swipe-item v-for="(image, index) in images" :key="index">
12 <img class="img" v-lazy="image" />
13 </van-swipe-item>
14 </van-swipe>
15 </div>
16 <!-- 类别选择 -->
17 <div class="sel">
18 <div class="sel-item sel-item-1">
19 黄金<br>首饰
20 </div>
21 <div class="sel-item sel-item-2">
22 翡翠<br>玉石
23 </div>
24 <div class="sel-item sel-item-3">
25 钻石<br>宝石
26 </div>
27 <div class="sel-item sel-item-4">
28 K金<br>首饰
29 </div>
30 <div class="sel-item sel-item-5">
31 我的<br>收藏
32 </div>
33 </div>
34 <div class="content">
35 <!-- 产品推荐 -->
36 <div class="product">
37 <div class="product-title">-- 产品推荐 --</div>
38 <div class="product-list">
39 <div class="item">
40 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
41 <div class="desc">黄金吊坠</div>
42 </div>
43 <div class="item">
44 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
45 <div class="desc">黄金吊坠</div>
46 </div>
47 <div class="item">
48 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
49 <div class="desc">黄金吊坠</div>
50 </div>
51 <div class="item">
52 <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
53 <div class="desc">黄金吊坠</div>
54 </div>
55 </div>
56 </div>
57 </div>
58 </div>
59 </div>
60 </template>
61 <script src="./index.js"></script>
62 <style lang="scss" scoped>
63 @import "./index.scss";
64 </style>
1 import api from '../../api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '../../api/fetch-api.js'
6
7 export default {
8 data() {
9 return {
10 key: 'value'
11 }
12 },
13 components: {},
14 methods: {
15 initData() {}
16 },
17 mounted() {},
18 created() {
19 console.log("demo created");
20 }
21 }
...\ No newline at end of file ...\ No newline at end of file
1 @import './../../styles/support';
1
2 <template>
3 <div class="page">
4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div>
6 <div class="app__content main">
7 <div class="top-space"></div>
8 <div class="content">
9 </div>
10 </div>
11 </div>
12 </template>
13
14 <script src="./index.js"></script>
15 <style lang="scss" scoped>
16 // @import './index.scss';
17 </style>
...\ No newline at end of file ...\ No newline at end of file
1 import api from '../../api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '../../api/fetch-api.js'
6
7 export default {
8 data() {
9 return {
10 key: 'value'
11 }
12 },
13 components: {},
14 methods: {
15 initData() {}
16 },
17 mounted() {},
18 created() {
19 console.log("demo created");
20 }
21 }
...\ No newline at end of file ...\ No newline at end of file
1 @import './../../styles/support';
1
2 <template>
3 <div class="page">
4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div>
6 <div class="app__content main">
7 <div class="top-space"></div>
8 <div class="content">
9 </div>
10 </div>
11 </div>
12 </template>
13
14 <script src="./index.js"></script>
15 <style lang="scss" scoped>
16 // @import './index.scss';
17 </style>
...\ No newline at end of file ...\ No newline at end of file
1 import api from '../../api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '../../api/fetch-api.js'
6
7 export default {
8 data() {
9 return {
10 key: 'value'
11 }
12 },
13 components: {},
14 methods: {
15 initData() {}
16 },
17 mounted() {},
18 created() {
19 console.log("demo created");
20 }
21 }
...\ No newline at end of file ...\ No newline at end of file
1 @import './../../styles/support';
1
2 <template>
3 <div class="page">
4 <div class="app__bgc bgc"></div>
5 <div class="app__bg bg"></div>
6 <div class="app__content main">
7 <div class="top-space"></div>
8 <div class="content">
9 </div>
10 </div>
11 </div>
12 </template>
13
14 <script src="./index.js"></script>
15 <style lang="scss" scoped>
16 // @import './index.scss';
17 </style>
...\ No newline at end of file ...\ No newline at end of file
1 import Vue from 'vue'
2 import Router from 'vue-router'
3 import Index from './pages/index/index.vue'
4
5 Vue.use(Router)
6
7 const routes = [{
8 path: '/',
9 name: 'index',
10 component: Index,
11 meta: {
12 title: '首页'
13 }
14 },
15 {
16 path: '/demo',
17 name: 'demo',
18 component: () => import('./pages/demo/demo.vue'),
19 meta: {
20 title: '模板'
21 }
22 },
23 {
24 path: '/about',
25 name: 'about',
26 component: () => import('./pages/About.vue'),
27 meta: {
28 title: '关于'
29 }
30 }
31 ]
32
33 // add route path
34 routes.forEach(route => {
35 route.path = route.path || '/' + (route.name || '');
36 });
37
38 const router = new Router({
39 routes
40 });
41
42 router.beforeEach((to, from, next) => {
43 const title = to.meta && to.meta.title;
44 if (title) {
45 document.title = title;
46 }
47 next();
48 });
49
50 export default router;
...\ No newline at end of file ...\ No newline at end of file
1 import Vue from 'vue'
2 import Vuex from 'vuex'
3
4 Vue.use(Vuex)
5
6 export default new Vuex.Store({
7 state: {
8
9 },
10 mutations: {
11
12 },
13 actions: {
14
15 }
16 })
1 /* 图片字体 */
2 @font-face {
3 font-family: 'iconfont';
4 src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASEAAsAAAAACSAAAAQ3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqFGIQnATYCJAMYCw4ABCAFhG0HVBvZBxGVnNvIfhzYDV+BAe9wtJiGONTGYuHBZ/Oh77Q3OxupItOeFFTcQjpRXwK+AIbn08ne766XppsiwRKPksQTj7AO4xAOv3fOAdsJc0KNZO3Io89Lf8K9BkY+ce+4df4Dms+yXMacNNbEAOOAAtrbF1mBxAlqy/Dq8uqwrgMBiPGAD4g6dbgGQhSseQRAKstK8iFMmFAVBMHSdsFWFpkNHhYzhbkEYJb3efIGQUQIDCaFtXQ0l1KEhOfKV+G019Ary7GgbzgHAGEXUIAPABZIZ6GrGTSI+oBia7/A4gVAioWBeq58vvHlkJeNr8INBhIyy0dwwV8esJg4MBAgfGCVlKUNj/HguZIawGrqjZgLPHg5xACK1Y2YCwy8Cpdclo4/YIMIcBLANZh9YGkIPHta2NorTKxUSlUNV7Koz2zswo0mRfNNRs9fbFq8YJr5uEXLWo7cEd+6pbl9W3v3rj4g7tzRpU+7HauR0YbmJ2+dalLELZy6ude0uGh+75Zp5iXFCxZMW2Q+0IQOKsa7SMJIKH18h3y9hWY+mN4tEtW0bYT2memWpk1db7L81tQ7dgs3isUbt1rrl0kU0yy1Sza7ZCw0m4lCIzFMF2ww15+Qp1u43sRk/hJT7YJN5uaLluolPZSTvq1m4vmbgR7veM116OjBGp2K21oMbkRGnvqglnCLVharuAM6gl+toTNYPZs5doyZDXyHbx/RSvZMt6tNtx7RlzkWlcysWQySV2I+Pio008Np8mQvL/j0CEVLLIItloiEIPIFnCBDN7ZpC6n3i/erE0uXICT/t+269rVrjx4de+wrwynfjo1BaN/tXQmzJ3wIF9krghUHqN1eFB4fMvuCROrnvVwdkUeWLff2k70IiO8fs2yOabXpHHdlvX+A5rmK6dx4piXlbHunib+iNeVM+UnXFvWZjR2uleVF/jsbK12wo8OWDpY+TRH0jP8syLs0WIlOAIDhFHOP+gIA1TF3kCOBOcbaj9FjgYCJ97CEFvwt35GfKZ2Yq4j5JiGUsAC+Juu7saSZavDK1Wgs/jeaagB/Q0WUsuYutTOdIKDlmTLhATa03MskN0+G0t1vcjyETCMMArY4CLmQiuaDSSIETSgem7dBu0/G6o2REgGeJiAQSrvAkDsKSukyiaU9Bo+Zd+BTZgwxXdZHSrjFro4ZoqKlgj+VSe4UsdaVX3iDfgeR41KP8UIuNkCBfgHpxBUd8hArGj760FgVcZkjpaLbEAJTbWYHWTeltfaNvz9X9KJNIcfBSrIMhApapMAfKSOxjnJ6V6vM+29AewuEXNFR432BrLCDk0B+AhqQrqquUceljG7woR00qhQ7i5OxiKRiBwSIMlJbPMkBqdoo7RDuNfyZblxT1WZ6TbzLfbBZ53QYQglLeIRPBBB9hPTHH9oLMhQ5r5ipDFwwMRwxRezrfzAAAA==')
5 format('woff2');
6 }
7
8 .iconfont {
9 font-family: 'iconfont' !important;
10 font-size: 16px;
11 font-style: normal;
12 -webkit-font-smoothing: antialiased;
13 -moz-osx-font-smoothing: grayscale;
14 }
15
16 .iconrefresh:before {
17 content: '\e874';
18 }
19
20 .iconempty:before {
21 content: '\e6a6';
22 }
23 .iconclose:before {
24 content: '\e849';
25 }
...\ No newline at end of file ...\ No newline at end of file
1 /**
2 * ------------------------------------------------------------------
3 * Sass Minxins
4 *
5 * 参考收集:
6 * https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap/mixins
7 * ------------------------------------------------------------------
8 *
9 */
10
11 // 文字截取
12 @mixin text-overflow() {
13 overflow: hidden;
14 white-space: normal;
15 text-overflow: ellipsis;
16 word-break: break-all;
17 word-wrap: normal;
18 }
19
20 @mixin word-break() {
21 word-break: break-all;
22 word-wrap: break-word;
23 white-space: normal;
24 }
25
26 // No wrap
27 @mixin no-wrap() {
28 word-break: normal;
29 word-wrap: normal;
30 white-space: nowrap;
31 }
32
33 // 清除浮动
34 @mixin clearfix() {
35 &:before,
36 &:after {
37 content: " "; // 1
38 display: table; // 2
39 }
40 &:after {
41 clear: both;
42 }
43 }
44
45 // Single side border-radius
46 @mixin border-top-radius($radius) {
47 border-top-right-radius: $radius;
48 border-top-left-radius: $radius;
49 }
50
51 @mixin border-right-radius($radius) {
52 border-bottom-right-radius: $radius;
53 border-top-right-radius: $radius;
54 }
55
56 @mixin border-bottom-radius($radius) {
57 border-bottom-right-radius: $radius;
58 border-bottom-left-radius: $radius;
59 }
60
61 @mixin border-left-radius($radius) {
62 border-bottom-left-radius: $radius;
63 border-top-left-radius: $radius;
64 }
65
66 // Center-align a block level element
67 @mixin center-block() {
68 display: block;
69 margin-left: auto;
70 margin-right: auto;
71 }
72
73 // CSS image replacement
74 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
75 @mixin hide-text() {
76 font-size: 0;
77 line-height: 0;
78 color: transparent;
79 text-shadow: none;
80 background-color: transparent;
81 border: 0;
82 }
1 @import "mixins";
2
3 @import "var";
4
5 @import "utils";
6
7 // 图标字体
8 @import "fonticon";
9
10 // 字体引入
11 @import './../assets/fonts/font.scss'
1 .bis {
2 background-repeat: no-repeat;
3 background-size: 100% 100%;
4 }
5
6 //flex 布局和 子元素 对其方式
7 .fl {
8 display: flex;
9 }
10
11 .fj {
12 display: flex;
13 justify-content: space-between;
14 }
15
16 .fje {
17 display: flex;
18 justify-content: flex-end;
19 }
20
21 //水平和垂直居中
22 .fcc {
23 display: flex;
24 justify-content: center;
25 align-items: center;
26 }
27
28 // 为元素设定的宽度和高度决定了元素的边框盒。
29 .bb {
30 box-sizing: border-box;
31 }
32
33 // 满屏
34 .fullp {
35 width: 100%;
36 height: 100%;
37 }
38
39 .shadow {
40 box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10);
41 border-radius: 8px;
42 }
43
44 .linear {
45 background-image: linear-gradient(to right, #1bade8, #3680EB);
46 }
...\ No newline at end of file ...\ No newline at end of file
1 /**
2 * ------------------------------------------------------------------
3 * Sass 变量
4 *
5 * ------------------------------------------------------------------
6 *
7 */
8
9 // Margin
10 $marginTopSmaller: 20px;
11 $marginTopSmall: 30px;
12 $marginTopMedium: 40px;
13 $marginTopLarge: 60px;
14 $marginTopLarger: 80px;
15
16 // Padding
17 $paddingTopSmaller: 20px;
18 $paddingTopSmall: 30px;
19 $paddingTopMedium: 40px;
20 $paddingTopLarge: 60px;
21 $paddingTopLarger: 80px;
22
23 // Color
24 $colorBlue: #20A0FF;
25 $colorGreen: #13CE66;
26 $colorGray: #475669;
27 $colorBlack: #000;
28 $colorRed: #FF4949;
29 $colorYellow: #F7BA2A;
30
31 $color: #787878;
32 $colorLink: #1D8CE0;
33
34 $backGroundColor: #fff;
35
36 // Font
37 $fontSize: 32px;
38 $fontSizeSmall: 28px;
39 $fontSizeSmaller: 24px;
40 $fontSizeLarge: 36px;
41 $fontSizeLarger: 44px;
42
43 $contentWidth: 690px; //内容宽度
44 $screenWidth: 750px; // 屏幕宽度
1 // 正在表达式
2 export const REGEXPS = {
3 "mobile": /^1\d{10}$/
4 }
5
6 // 验证手机
7 export function checkMobile(str) {
8 return REGEXPS.mobile.test(str);
9 }
10
11 /**
12 * 链接参数转换为obj
13 * 入参 完整链接
14 * @param {*} url
15 */
16 export function param2Obj(url) {
17 const search = url.split('?')[1]
18 if (!search) {
19 return {}
20 }
21 return JSON.parse(
22 '{"' +
23 decodeURIComponent(search)
24 .replace(/"/g, '\\"')
25 .replace(/&/g, '","')
26 .replace(/=/g, '":"') +
27 '"}'
28 )
29 }
30
31
32
33 //获取cookie、
34 export function getCookie(name) {
35 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
36 if (arr = document.cookie.match(reg))
37 return (arr[2]);
38 else
39 return null;
40 }
41
42 //设置cookie
43 export function setCookie(c_name, value, expiredays) {
44 var exdate = new Date();
45 exdate.setDate(exdate.getDate() + expiredays);
46 document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
47 };
48
49 //删除cookie
50 export function delCookie(name) {
51 var exp = new Date();
52 exp.setTime(exp.getTime() - 1);
53 var cval = getCookie(name);
54 if (cval != null)
55 document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
56 };
57
58
59 /**
60 * 获取环境信息
61 * @return {Object} 环境信息对象
62 */
63 export function getEnv() {
64 var nav = window.navigator;
65 var env = {
66 "iphone": false,
67 "ipad": false,
68 "android": false,
69 "pc": false,
70 "ios": false,
71 "ver": "0"
72 };
73
74 var ua = nav.userAgent;
75 var android = ua.match(/(Android)\s+([\d.]+)/);
76 var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
77 var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
78 if (ipad) {
79 env.ipad = ipad[1] && true || false;
80 env.ver = ipad[2] && ipad[2].replace(/-/g, ".") || "";
81 env.ios = true;
82 } else if (iphone) {
83 env.iphone = iphone[1] && true || false;
84 env.ver = iphone[2] && iphone[2].replace(/-/g, ".") || "";
85 env.ios = true;
86 } else if (android) {
87 env.android = android[1] && true || false;
88 env.ver = android[2];
89 } else {
90 env.pc = true;
91 }
92
93 return env;
94 }
95
96 /**
97 * 设定页面 title
98 * @param {[type]} title [description]
99 */
100 export function setTitle(title) {
101 if (!title) {
102 return;
103 }
104 document.title = title;
105 // if (ENV.ios && navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1) {
106 // 修复微信端IOS无法修改document.title的情况
107 if (getEnv().ios && (navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1 || navigator.userAgent.toLowerCase().indexOf("alipay") !== -1)) {
108 //修复IOS微信端和支付宝无法修改document.title的情况
109 var $iframe = document.createElement('iframe');
110 $iframe.className = "C-hiddenIframe";
111 $iframe.src = "/" + location.pathname.split('/')[1] + "/favicon.ico";
112 $iframe.style.visibility = 'hidden';
113 $iframe.style.width = '1px';
114 $iframe.style.height = '1px';
115 $iframe.onload = function onIframeLoad() {
116 setTimeout(function () {
117 $iframe.onload = null;
118 onIframeLoad = null;
119 document.body.removeChild($iframe);
120 $iframe = null;
121 }, 0);
122 };
123 document.body.appendChild($iframe);
124 }
125 }
126
127 // 为链接添加参数
128 export function addQuery(url, query) {
129 query = query || {}
130 query = (function (query) {
131 var q = []
132 Object.keys(query).forEach(function (_q) {
133 q.push(_q + '=' + query[_q])
134 })
135 return q.join('&')
136 })(query)
137 if (url.indexOf('?') !== -1) {
138 url += '&' + query
139 } else {
140 url += '?' + query
141 }
142 return url
143 }
144
145
146 /**
147 * 获得当前页面的path
148 * @return {String} 页面path
149 */
150 export function getPath() {
151 var path = window.location.hash;
152 path = path || "#/";
153 path = path === "#/" ? "#/index" : path;
154 path = path.split("?");
155 return path[0];
156 }
157
158 // 获取 url 参数
159 export function getQuery(name) {
160 return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
161 }
162
163 /**
164 * 把 \n换行符转换成<br>
165 * 转换后需要用 v-html渲染
166 * 用{{}}会当成字符串把 html渲染出来
167 */
168 export function formatBr(str) {
169 str = str.replace(/\n/g, '<br/>')
170 return str
171 };
172
173
174 /**
175 * @desc 函数防抖
176 * @param func 函数
177 * @param wait 延迟执行毫秒数
178 * @param immediate true 表立即执行,false 表非立即执行
179 */
180 export function debounce(func, wait, immediate) {
181 let timeout;
182
183 return function () {
184 let context = this;
185 let args = arguments;
186
187 if (timeout) clearTimeout(timeout);
188 if (immediate) {
189 var callNow = !timeout;
190 timeout = setTimeout(() => {
191 timeout = null;
192 }, wait)
193 if (callNow) func.apply(context, args)
194 } else {
195 timeout = setTimeout(function () {
196 func.apply(context, args)
197 }, wait);
198 }
199 }
200 }
201
202 /**
203 * @desc 函数节流
204 * @param func 函数
205 * @param wait 延迟执行毫秒数
206 * @param type 1 表时间戳版,2 表定时器版
207 * 时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。
208 */
209 export function throttle(func, wait, type) {
210 if (type === 1) {
211 var previous = 0;
212 } else if (type === 2) {
213 var timeout;
214 }
215 return function () {
216 let context = this;
217 let args = arguments;
218 if (type === 1) {
219 let now = Date.now();
220
221 if (now - previous > wait) {
222 func.apply(context, args);
223 previous = now;
224 }
225 } else if (type === 2) {
226 if (!timeout) {
227 timeout = setTimeout(() => {
228 timeout = null;
229 func.apply(context, args)
230 }, wait)
231 }
232 }
233 }
234 }
...\ No newline at end of file ...\ No newline at end of file
1 import wx from 'weixin-js-sdk';
2
3 wx.ready(function () { //通过ready接口处理成功验证
4 // config信息验证成功后会执行ready方法
5 wx.onMenuShareAppMessage({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表,然后这个方法才可以用
6 title: '这里是标题', // 分享标题
7 desc: 'This is a test!', // 分享描述
8 link: '链接', // 分享链接
9 imgUrl: '图片', // 分享图标
10 type: '', // 分享类型,music、video或link,不填默认为link
11 dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
12 success: function () {
13 // 用户确认分享后执行的回调函数
14 },
15 cancel: function () {
16 // 用户取消分享后执行的回调函数
17 }
18 });
19 wx.onMenuShareTimeline({ //分享朋友圈
20 title: '标题', // 分享标题
21 link: '链接',
22 imgUrl: '图片', // 分享图标
23 success: function () {
24 // 用户确认分享后执行的回调函数
25 },
26 cancel: function () {
27 // 用户取消分享后执行的回调函数
28 }
29 });
30 });
31 wx.error(function (res) {//通过error接口处理失败验证
32 // config信息验证失败会执行error函数
33 });
34
35
36 wx.config({
37 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
38 appId: '', // 必填,公众号的唯一标识
39 timestamp: '', // 必填,生成签名的时间戳
40 nonceStr: '', // 必填,生成签名的随机串
41 signature: '',// 必填,签名,见附录1
42 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
43 });
1 const path = require('path')
2 const Timestamp = new Date().getTime();
3 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4 // 打包目录
5 let webpack_public_path = 'dist'
6 if (process.env.NODE_ENV === 'production') {
7 webpack_public_path = process.env.VUE_APP_TITLE
8 }
9
10 function resolve(dir) {
11 return path.join(__dirname, dir);
12 }
13
14 module.exports = {
15 chainWebpack: (config) => {
16 config.resolve.alias
17 .set('@', resolve('src'))
18 .set('@assets', resolve('src/assets'))
19 .set('@components', resolve('src/components'))
20 .set('@pages', resolve('src/pages'))
21 .set('@api', resolve('src/api'))
22 .set('@styles', resolve('src/styles'))
23 .set('@store', resolve('src/store'))
24 .set('@utils', resolve('src/utils'))
25 },
26 configureWebpack: { // webpack 配置
27 // 修改打包后js文件名
28 output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
29 filename: `static/js/[name].${Timestamp}.js`,
30 chunkFilename: `static/js/[name].${Timestamp}.js`
31 },
32 // 修改打包后css文件名
33 plugins: [
34 new MiniCssExtractPlugin({
35 filename: `static/css/[name].${Timestamp}.css`,
36 chunkFilename: `static/css/[name].${Timestamp}.css`
37 })
38 ]
39 },
40 // 修改打包后img文件名
41 // chainWebpack: config => {
42 // config.module
43 // .rule('images')
44 // .use('url-loader')
45 // .tap(options => {
46 // return {
47 // limit: 4096,
48 // fallback: {
49 // loader: 'file-loader',
50 // options: {
51 // name: `img/[name].${Timestamp}.[ext]`
52 // }
53 // }
54 // };
55 // })
56 // },
57 // 部署生产环境和开发环境下的URL。
58 // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
59 //例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。
60 //baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath
61 //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
62 publicPath: process.env.NODE_ENV === "dev" ? "/" : "./",
63
64 // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)
65 outputDir: webpack_public_path,
66 //用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
67 assetsDir: "assets",
68 //指定生成的 index.html 的输出路径 (打包之后,改变系统默认的index.html的文件名)
69 // indexPath: "myIndex.html",
70 //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
71 filenameHashing: false,
72
73 // lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
74 lintOnSave: true,
75 //如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置
76 // lintOnSave: process.env.NODE_ENV !== 'production',
77
78 //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false)
79 // runtimeCompiler: false,
80
81 /**
82 * 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
83 * 打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件
84 * map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
85 * 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
86 * */
87 productionSourceMap: false,
88
89 // 它支持webPack-dev-server的所有选项
90 // devServer: {
91 // host: "localhost",
92 // port: 9001, // 端口号
93 // https: false, // https:{type:Boolean}
94 // open: true, //配置自动启动浏览器
95 // // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
96 // }
97 };