Vue2.5 Web App 项目搭建 (TypeScript版)

 1 {
 2   "name": "app",
 3   "version": "1.0.0",
 4   "description": "App package.json from the documentation, supplemented with testing support",
 5   "author": "",
 6   "private": true,
 7   "scripts": {
 8     "dev": "webpack-dev-server -d --inline --hot --env.dev",
 9     "build": "rimraf dist && webpack --progress --hide-modules"
10   },
11   "dependencies": {
12     "axios": "^0.18.0",
13     "bootstrap": "^4.0.0",
14     "bootstrap-vue": "^2.0.0-rc.2",
15     "element-ui": "^2.2.2",
16     "font-awesome": "^4.7.0",
17     "jointjs": "^2.0.1",
18     "jquery": "^3.3.1",
19     "js-md5": "^0.7.3",
20     "layui-src": "^2.2.5",
21     "linq": "^3.0.9",
22     "lodash": "^4.17.5",
23     "pdfmake": "^0.1.36",
24     "popper.js": "^1.14.1",
25     "tinymce": "^4.7.12",
26     "uuid": "^3.2.1",
27     "vue": "^2.5.16",
28     "vue-class-component": "^6.2.0",
29     "vue-echarts-v3": "^1.0.19",
30     "vue-i18n": "^7.6.0",
31     "vue-i18n-extensions": "^0.1.0",
32     "vue-lazyload": "^1.2.3",
33     "vue-pdf": "^3.3.1",
34     "vue-property-decorator": "^6.0.0",
35     "vue-router": "^3.0.1",
36     "vue-socket.io": "^2.1.1-b",
37     "vue-tinymce": "github:lpreterite/vue-tinymce",
38     "vue-video-player": "^5.0.2",
39     "vuex": "^3.0.1",
40     "vuex-class": "^0.3.0"
41   },
42   "engines": {
43     "node": ">=6.0.0",
44     "npm": ">= 3.0.0"
45   },
46   "browserslist": [
47     "> 1%",
48     "last 2 versions",
49     "not ie <= 8"
50   ],
51   "devDependencies": {
52     "@kazupon/vue-i18n-loader": "^0.3.0",
53     "@types/lodash": "^4.14.106",
54     "ajv": "^6.3.0",
55     "autoprefixer": "^8.2.0",
56     "babel-core": "^6.26.3",
57     "babel-helper-vue-jsx-merge-props": "^2.0.3",
58     "babel-loader": "^7.1.4",
59     "babel-plugin-syntax-dynamic-import": "^6.18.0",
60     "babel-plugin-syntax-jsx": "^6.18.0",
61     "babel-plugin-transform-vue-jsx": "^3.7.0",
62     "babel-preset-env": "^1.6.1",
63     "bootstrap-loader": "^2.2.0",
64     "clean-webpack-plugin": "^0.1.19",
65     "compression-webpack-plugin": "^1.1.11",
66     "copy-webpack-plugin": "^4.5.1",
67     "css-loader": "^0.28.11",
68     "cssnano": "^3.10.0",
69     "extract-text-webpack-plugin": "^3.0.2",
70     "file-loader": "^1.1.11",
71     "html-loader": "^0.5.5",
72     "html-webpack-plugin": "^3.1.0",
73     "image-webpack-loader": "^4.2.0",
74     "json-loader": "^0.5.7",
75     "node-sass": "^4.7.2",
76     "optimize-css-assets-webpack-plugin": "^3.2.0",
77     "postcss-import": "^11.1.0",
78     "postcss-loader": "^2.1.3",
79     "postcss-url": "^7.3.2",
80     "resolve-url-loader": "^2.3.0",
81     "rimraf": "^2.6.2",
82     "sass-loader": "^6.0.7",
83     "sass-resources-loader": "^1.3.3",
84     "style-loader": "^0.20.3",
85     "ts-loader": "^3.1.1",
86     "tslint": "^5.9.1",
87     "tslint-config-standard": "^7.0.0",
88     "tslint-loader": "^3.6.0",
89     "typescript": "^2.8.3",
90     "uglifyjs-webpack-plugin": "^1.2.5",
91     "url-loader": "^1.0.1",
92     "vue-loader": "^14.2.1",
93     "vue-style-loader": "^4.1.0",
94     "vue-template-compiler": "^2.5.16",
95     "webpack": "^3.1.0",
96     "webpack-dev-server": "^2.9.4",
97     "webpack-parallel-uglify-plugin": "^1.1.0"
98   }
99 }

  1 const {resolve} = require(‘path‘);
  2 const webpack = require(‘webpack‘);
  3 const CopyWebpackPlugin = require(‘copy-webpack-plugin‘);
  4 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
  5 const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
  6 const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin‘);
  7 const ParallelUglifyPlugin=require(‘webpack-parallel-uglify-plugin‘) ;
  8 const CompressionWebpackPlugin = require(‘compression-webpack-plugin‘);
  9 const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
 10 const url = require(‘url‘);
 11 const publicPath = ‘/public/‘;
 12 
 13 function getVueStyleLoader(isDev) {
 14     if (!isDev) {
 15         return ExtractTextPlugin.extract({
 16             fallback: "vue-style-loader",
 17             use: ["css-loader", "postcss-loader", "sass-loader",
 18                 "sass-resources-loader?resources=./src/common/style/sass-resources.scss"]
 19         });
 20     }
 21     return "vue-style-loader!css-loader?sourceMap!postcss-loader?sourceMap!sass-loader?sourceMap!sass-resources-loader?resources=./src/common/style/sass-resources.scss";
 22 }
 23 
 24 function getCssLoader(isDev) {
 25     if (!isDev) {
 26         return ExtractTextPlugin.extract({
 27             fallback: "style-loader",
 28             use: ["css-loader", "postcss-loader"]
 29         });
 30     }
 31     return [
 32         {loader: ‘style-loader‘},
 33         {loader: ‘css-loader‘, options: {sourceMap: true}},
 34         {loader: ‘postcss-loader‘, options: {sourceMap: true}},
 35     ];
 36 }
 37 
 38 function getScssLoader(isDev) {
 39     if (!isDev) {
 40         return ExtractTextPlugin.extract({
 41             fallback: "style-loader",
 42             use: ["css-loader", "postcss-loader", "sass-loader",
 43                 "sass-resources-loader?resources=./src/common/style/sass-resources.scss"]
 44         });
 45     }
 46     return [
 47         {loader: ‘style-loader‘},
 48         {loader: ‘css-loader‘, options: {sourceMap: true}},
 49         {loader: ‘postcss-loader‘, options: {sourceMap: true}},
 50         {loader: ‘sass-loader‘, options: {sourceMap: true}},
 51         {
 52             loader: ‘sass-resources-loader‘,
 53             options: {resources: ‘./src/common/style/sass-resources.scss‘}
 54         }
 55     ];
 56 }
 57 
 58 function getPlugins(isDev, plugins) {
 59     if (!isDev) {
 60         plugins.push(
 61             new ExtractTextPlugin({
 62                 filename: ‘assets/css/[name].[contenthash:8].css‘,
 63                 // Setting the following option to `false` will not extract CSS from codesplit chunks.
 64                 // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
 65                 // It‘s currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it‘s `false`,
 66                 // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
 67                 allChunks: true,
 68             }),
 69             // Compress extracted CSS. We are using this plugin so that possible
 70             // duplicated CSS from different components can be deduped.
 71             new OptimizeCSSPlugin({
 72               assetNameRegExp: /\.css$/g,
 73               cssProcessor: require(‘cssnano‘),
 74               cssProcessorOptions: { discardComments: {removeAll: true}},
 75               canPrint: true,
 76             }),
 77             new ParallelUglifyPlugin({
 78                 uglifyJS: {
 79                     output: {
 80                         comments:  false  //去掉注释
 81                     },
 82                     compress: {
 83                         warnings:  false,
 84                         drop_debugger:  true,
 85                         drop_console:  true
 86                     },
 87                     sourceMap: false,
 88                 }
 89             }),
 90             // new CompressionWebpackPlugin({
 91             //     asset: ‘[path].gz[query]‘, //目标文件名
 92             //     algorithm: ‘gzip‘, //使用gzip压缩
 93             //     test: new RegExp( //满足正则表达式的文件会被压缩
 94             //         ‘\\.(‘ + [‘js‘, ‘css‘].join(‘|‘) + ‘)$‘
 95             //     ),
 96             //     threshold: 10240, //资源文件大于10240B=10kB时会被压缩
 97             //     minRatio: 0.8 //最小压缩比达到0.8时才会被压缩
 98             // }),
 99             new CopyWebpackPlugin([
100                 {
101                     from: resolve(__dirname, ‘static‘),
102                     to: resolve(__dirname, `../web/static`),
103                     ignore: [‘.*‘]  //忽视.*文件
104                 },
105                 {
106                     from: ‘favicon.ico‘,
107                     to: resolve(__dirname, ‘../web/‘),
108                     force: true
109                 }], {}),
110             new webpack.DefinePlugin({
111                 ‘process.env‘: {
112                     NODE_ENV: JSON.stringify(‘production‘)
113                 }
114             }),
115             new CleanWebpackPlugin([
116                 `../web/${publicPath}/chunks`,
117                 `../web/${publicPath}/assets`,
118                 `../web/static`], {
119                 root: __dirname,
120                 verbose: true,
121                 dry: false,
122                 allowExternal: true
123             }),
124         );
125     }
126     return plugins;
127 }
128 
129 module.exports = (options = {}) => ({
130     entry: {
131         vendor: [
132             ‘./src/vendor.ts‘,
133             `bootstrap-loader/lib/bootstrap.loader?${!options.dev ? ‘extractStyles‘ : ‘‘}&configFilePath=${__dirname}/.bootstraprc!bootstrap-loader/no-op.js`,
134             ‘lodash‘,
135             ‘linq‘
136         ],
137         main: ‘./src/main.ts‘
138     },
139     output: {
140         path: resolve(__dirname, ‘../web‘ + publicPath),
141         filename: ‘[name].js‘,
142         chunkFilename: ‘chunks/[name].[chunkhash:8].js‘,
143         publicPath: options.dev ? ‘/‘ : publicPath
144     },
145     resolve: {
146         extensions: [‘.ts‘, ‘.tsx‘, ‘.js‘, ‘.vue‘, ‘.json‘],
147         alias: {
148             ‘vue$‘: ‘vue/dist/vue.esm.js‘,
149             ‘@‘: resolve(__dirname, ‘src‘),
150         }
151     },
152     module: {
153         rules: [
154             {
155                 test: /\.js$/,
156                 loader: ‘babel-loader‘,
157                 // exclude: file => (
158                 //     /node_modules/.test(file) &&
159                 //     !/\.vue\.js/.test(file)
160                 // ),
161                 include: [
162                     resolve(‘src‘),
163                     resolve(‘node_modules/vue-echarts-v3/src‘),
164                     resolve(‘node_modules/vue-pdf/src‘)
165                 ]
166             },
167             {
168                 test: /\.tsx?$/,
169                 exclude: /node_modules/,
170                 enforce: ‘pre‘,
171                 loader: ‘tslint-loader‘
172             },
173             {
174                 test: /\.tsx?$/,
175                 exclude: /node_modules|vue\/src/,
176                 use: [
177                     "babel-loader",
178                     {
179                         loader: "ts-loader",
180                         options: {
181                             appendTsSuffixTo: [/\.vue$/],
182                             transpileOnly: true,
183                         }
184                     }
185                 ]
186             },
187             {
188                 test: /\.vue$/,
189                 use: [{
190                     loader: ‘vue-loader‘,
191                     options: {
192                         loaders: {
193                             js: "babel-loader",
194                             ts: "ts-loader!tslint-loader",
195                             tsx: "babel-loader!ts-loader!tslint-loader",
196                             scss: getVueStyleLoader(options.dev),
197                             i18n: "@kazupon/vue-i18n-loader"
198                         }
199                     }
200                 }]
201             },
202             {
203                 test: /\.css$/,
204                 use: getCssLoader(options.dev),
205             },
206             {
207                 test: /\.scss$/,
208                 use: getScssLoader(options.dev),
209                 exclude: /node_modules/
210             },
211             {
212                 test: /favicon\.png$/,
213                 use: [{
214                     loader: ‘file-loader‘,
215                     options: {
216                         name: ‘[name].[ext]?[hash]‘
217                     }
218                 }]
219             },
220             {
221                 test: /\.((woff2?|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff2?|svg|jpe?g|png|gif|ico)$/,
222                 exclude: /favicon\.png$/,
223                 use: [
224                     // 小于10KB的图片会自动转成dataUrl
225                     {
226                         loader: ‘url-loader‘,
227                         options: {
228                             limit: 10240,
229                             name: "assets/image/[name].[hash:8].[ext]"
230                         }
231                     },
232                     {
233                         loader: ‘image-webpack-loader‘,
234                         options: {
235                             query: {
236                                 mozjpeg: {
237                                     progressive: true,
238                                 },
239                                 gifsicle: {
240                                     interlaced: true,
241                                 },
242                                 optipng: {
243                                     bypassOnDebug: true,
244                                     progressive: true,
245                                     pngquant: {quality: "65-80", speed: 4}
246                                 }
247                             }
248                         }
249                     }
250                 ]
251             },
252             {
253                 test: /\.((ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9]))|(ttf|eot)$/,
254                 use: [
255                     {
256                         loader: ‘url-loader‘,
257                         options: {
258                             limit: 10240,
259                             name: "assets/font/[name].[hash:8].[ext]"
260                         }
261                     }]
262             },
263             {
264                 test: /\.json$/,
265                 loader: ‘json-loader‘,
266                 exclude: /node_modules/
267             }
268         ],
269         loaders: [
270             {
271                 test: require.resolve(‘tinymce/tinymce‘),
272                 loaders: [
273                     ‘imports?this=>window‘,
274                     ‘exports?window.tinymce‘
275                 ]
276             },
277             {
278                 test: /tinymce\/(themes|plugins)\//,
279                 loaders: [
280                     ‘imports?this=>window‘
281                 ]
282             }]
283     },
284     plugins: getPlugins(options.dev, [
285         new CopyWebpackPlugin([
286             { from: ‘./node_modules/layui-src/dist/lay‘, to: ‘./chunks/lay‘ },
287             { from: ‘./node_modules/layui-src/dist/css‘, to: ‘./chunks/css‘ },
288             { from: ‘./node_modules/tinymce/plugins‘, to: ‘./chunks/plugins‘ },
289             { from: ‘./node_modules/tinymce/themes‘, to: ‘./chunks/themes‘ },
290             { from: ‘./node_modules/tinymce/skins‘, to: ‘./chunks/skins‘ },
291             // {from: ‘viewer‘,
292             // to: (options.dev ? ‘/‘ : resolve(__dirname, ‘./build/public/viewer/‘)),
293             // force: true}
294         ], {}),
295         // split vendor js into its own file
296         new webpack.optimize.CommonsChunkPlugin({
297             name: ‘vendor‘,
298             minChunks(module) {
299                 // any required modules inside node_modules are extracted to vendor
300                 return (
301                     module.resource &&
302                     /\.js$/.test(module.resource) &&
303                     module.resource.indexOf(
304                         resolve(__dirname, ‘../node_modules‘)
305                     ) === 0
306                 )
307             }
308         }),
309         // extract webpack runtime and module manifest to its own file in order to
310         // prevent vendor hash from being updated whenever app bundle is updated
311         new webpack.optimize.CommonsChunkPlugin({
312             name: ‘manifest‘,
313             minChunks: Infinity,
314         }),
315         // This instance extracts shared chunks from code splitted chunks and bundles them
316         // in a separate chunk, similar to the vendor chunk
317         // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
318         new webpack.optimize.CommonsChunkPlugin({
319             name: ‘main‘,
320             async: ‘common‘,
321             children: true,
322             minChunks: 2
323         }),
324         new HtmlWebpackPlugin({
325             template: ‘src/index.html‘,
326             filename: options.dev ? ‘index.html‘ : resolve(__dirname, ‘../web/index.html‘),
327             inject: true, //注入的js文件将会被放在body标签中,当值为‘head‘时，将被放在head标签中
328             chunks: ["manifest", "vendor", "common", "main"],
329             hash: true,
330             minify: {  //压缩配置
331                 removeComments: true, //删除html中的注释代码
332                 collapseWhitespace: true,  //删除html中的空白符
333                 removeAttributeQuotes: true  //删除html元素中属性的引号
334             },
335             chunksSortMode: ‘dependency‘ //按dependency的顺序引入
336         }),
337         // 该处设定的参数可在程序中访问,但必须以/开头和结尾,并且/也会是值的一部分
338         new webpack.DefinePlugin({
339             __API_PATH__: options.dev ? ‘/api/‘ : ‘/ /‘,  // 此处必须写成/ / ,必须以/开头和结尾,且中间必须有一个空格
340             __ASSETS_PATH__: options.dev ? ‘/‘ : publicPath
341         }),
342         new webpack.ProvidePlugin({
343             _: ‘lodash‘,
344             Enumerable: ‘linq‘
345         })
346     ]),
347     node: {
348         // prevent webpack from injecting useless setImmediate polyfill because Vue
349         // source contains it (although only uses it if it‘s native).
350         setImmediate: false,
351         // prevent webpack from injecting mocks to Node native modules
352         // that does not make sense for the client
353         dgram: ‘empty‘,
354         fs: ‘empty‘,
355         net: ‘empty‘,
356         tls: ‘empty‘,
357         child_process: ‘empty‘
358     },
359     devServer: {
360         host: ‘127.0.0.1‘,
361         port: 8081,
362         proxy: {
363             ‘/api/*‘: {
364                 target: ‘http://127.0.0.1:8080‘,
365                 secure: false,
366                 changeOrigin: true,
367                 pathRewrite: {
368                     ‘^/api‘: ‘‘
369                 }
370             }
371         },
372         historyApiFallback: {
373             index: url.parse(options.dev ? ‘/‘ : publicPath).pathname
374         }
375     },
376     devtool: options.dev ? ‘#cheap-module-eval-source-map‘ : ‘#source-map‘,
377 })

 1 {
 2   "compilerOptions": {
 3     // 编译输出目标 ES 版本
 4     "target": "es5",
 5     // 采用的模块系统
 6     "module": "esnext",
 7     // 如何处理模块
 8     "moduleResolution": "node",
 9     // 以严格模式解析
10     "strict": false,
11     // 是否包含可以用于 debug 的 sourceMap
12     "sourceMap": true,
13     // 允许从没有设置默认导出的模块中默认导入
14     "allowSyntheticDefaultImports": true,
15     // 将每个文件作为单独的模块
16     "isolatedModules": false,
17     // 启用装饰器
18     "experimentalDecorators": true,
19     // 启用设计类型元数据（用于反射）
20     "emitDecoratorMetadata": true,
21     "removeComments": false,
22     // 在表达式和声明上有隐含的any类型时报错
23     "noImplicitAny": false,
24     // 不是函数的所有返回路径都有返回值时报错。
25     "noImplicitReturns": true,
26     // 从 tslib 导入外部帮助库: 比如__extends，__rest等
27     "importHelpers": true,
28     "suppressImplicitAnyIndexErrors": true,
29     "noResolve": false,
30     // 允许编译javascript文件
31     "allowJs": true,
32     // 解析非相对模块名的基准目录
33     "baseUrl": "./",
34     // 指定特殊模块的路径
35     "paths": {
36       "jquery": [
37         "node_modules/jquery/dist/jquery"
38       ]
39     },
40     "lib": ["es2017", "dom"],
41     "jsx": "preserve"
42   },
43   "exclude": [
44     "node_modules"
45   ]
46 }

1 {
2   "presets": ["env"],
3   "plugins": [
4     "syntax-dynamic-import",
5     "transform-vue-jsx"
6   ]
7 }

 1 import {AxiosStatic} from "axios";
 2 
 3 declare module "*.png" {
 4     const value: any;
 5     export default value;
 6 }
 7 
 8 declare module "*.jpg" {
 9     const value: any;
10     export default value;
11 }
12 
13 declare module ‘vue/types/vue‘ {
14     interface Vue {
15         $http: AxiosStatic,
16         $socket: any,
17     }
18 }

1 declare module "*.vue" {
2     import Vue from "vue";
3     export default Vue;
4 }

 1 import Vue, { AsyncComponent } from ‘vue‘;
 2 import Vuex from "vuex";
 3 import VueRouter from "vue-router";
 4 import VueLazyLoad from "vue-lazyload";
 5 import VueI18n from ‘vue-i18n‘
 6 import axios from "axios";
 7 
 8 import BootstrapVue from "bootstrap-vue";
 9 import ElementUI from "element-ui";
10 
11 import enLocaleElementUI from ‘element-ui/lib/locale/lang/en‘
12 import zhCNLocaleElementUI from ‘element-ui/lib/locale/lang/zh-CN‘
13 import enLocaleCommon from ‘./common/lang/en‘
14 import zhCNLocaleCommon from ‘./common/lang/zh-CN‘
15 import enLocaleApp from ‘./lang/en‘
16 import zhCNLocaleApp from ‘./lang/zh-CN‘
17 
18 import VueSocketio from ‘vue-socket.io‘;
19 
20 import App from "./app.vue";
21 import routes from "./framework/routes";
22 
23 import "@/common/style/baseStyle.css";
24 import "@/common/style/var.scss";
25 import "@/common/style/layout.scss";
26 
27 // import VueECharts from "vue-echarts/components/ECharts.vue";
28 // import ECharts modules manually to reduce bundle size;
29 // import "echarts/lib/chart/bar";
30 // import "echarts/lib/component/tooltip";
31 
32 Vue.use(Vuex);
33 Vue.use(VueRouter);
34 
35 Vue.use(VueLazyLoad, {
36     // error:"./static/error.png",
37     // loading:"./static/loading.png"
38 })
39 
40 Vue.use(VueI18n)
41 
42 Vue.prototype.$http = axios;
43 
44 Vue.use(BootstrapVue);
45 
46 const messages = {
47     "en": {
48         ...enLocaleElementUI,
49         ...enLocaleCommon,
50         ...enLocaleApp,
51     },
52     "zh-CN": {
53         ...zhCNLocaleElementUI,
54         ...zhCNLocaleCommon,
55         ...zhCNLocaleApp,
56     }
57 }
58 
59 // Create VueI18n instance with options
60 const i18n = new VueI18n({
61     locale: ‘zh-CN‘, // set locale
62     messages, // set locale messages
63     silentTranslationWarn: true
64 })
65 
66 Vue.use(ElementUI, {
67     i18n: (key, value) => i18n.t(key, value)
68 })
69 
70 Vue.use(VueSocketio, ‘http://127.0.0.1:9092‘);
71 
72 const router = new VueRouter({
73     routes
74 })
75 
76 const vm = new Vue({
77     el: "#app",
78     data: {rootid: "ac"},
79     // components: {
80     //     echarts
81     // },
82     router,
83     render: h => h(App),
84     i18n
85 })