├── .babelrc
├── .gitignore
├── README.md
├── globals.d.ts
├── package-lock.json
├── package.json
├── pages
    ├── home
    │   ├── index.html
    │   ├── index.ts
    │   └── index.vue
    └── test
    │   ├── index.html
    │   ├── index.ts
    │   └── index.vue
├── tsconfig.json
├── vendors
    ├── public.ts
    └── url.min.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["es2015", "stage-0"]
 4 |   ],
 5 |   "plugins": [
 6 |     "transform-runtime",
 7 |     [
 8 |       "component",
 9 |       {
10 |         "libraryName": "element-ui",
11 |         "styleLibraryName": "theme-chalk"
12 |       }
13 |     ]
14 |   ]
15 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | build
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### vue+ts+element-ui+webpack project build
 2 | 
 3 | #### Usage
 4 | 
 5 | ```
 6 | git clone
 7 | npm install
 8 | npm run start
 9 | build: npm run prod
10 | ```
11 | 
12 | #### Introduction
13 | ##### 此项目使用 webpack4 版本
14 | ##### 使用了基于类的 Vue 组件 vue-class-component 进行开发
15 | ##### 此项目为多页应用  非 SPA


--------------------------------------------------------------------------------
/globals.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import Vue from 'vue'
3 |   export default Vue
4 | }
5 | 
6 | declare var $;
7 | 
8 | declare function require(path: string): any;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "profession-stars-web",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "mocha-webpack --webpack-config webpack.config.js test/**/*.spec.js",
 8 |     "start": "webpack-dev-server --inline --env=dev --progress --profile --colors",
 9 |     "prod": "rm -rf build && webpack --progress"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": ""
14 |   },
15 |   "keywords": [],
16 |   "author": "",
17 |   "license": "ISC",
18 |   "dependencies": {
19 |     "babel": "^6.23.0",
20 |     "babel-core": "^6.25.0",
21 |     "babel-loader": "^7.1.1",
22 |     "babel-plugin-transform-runtime": "^6.23.0",
23 |     "babel-preset-env": "^1.6.0",
24 |     "babel-preset-es2015": "^6.24.1",
25 |     "babel-preset-stage-0": "^6.24.1",
26 |     "babel-runtime": "^6.26.0",
27 |     "css-loader": "^0.28.4",
28 |     "element-ui": "^2.4.6",
29 |     "extract-text-webpack-plugin": "^3.0.0",
30 |     "file-loader": "^2.0.0",
31 |     "html-webpack-plugin": "^3.2.0",
32 |     "jquery": "^3.2.1",
33 |     "less": "^3.8.1",
34 |     "less-loader": "^4.1.0",
35 |     "mini-css-extract-plugin": "^0.4.2",
36 |     "style-loader": "^0.18.2",
37 |     "vue": "^2.5.17",
38 |     "vue-class-component": "^6.2.0",
39 |     "vue-loader": "^14.2.3",
40 |     "vue-property-decorator": "^7.0.0",
41 |     "vue-style-loader": "^3.1.2",
42 |     "vue-template-compiler": "^2.5.17",
43 |     "webpack": "^4.17.1",
44 |     "webpack-cli": "^3.1.0",
45 |     "webpack-dev-server": "^2.9.7"
46 |   },
47 |   "devDependencies": {
48 |     "babel-plugin-component": "^0.10.0",
49 |     "chai": "^4.1.2",
50 |     "chalk": "^2.4.1",
51 |     "coffeescript": "^2.3.1",
52 |     "expose-loader": "^0.7.5",
53 |     "friendly-errors-webpack-plugin": "^1.7.0",
54 |     "mocha": "^5.2.0",
55 |     "mocha-webpack": "^1.1.0",
56 |     "node-notifier": "^5.2.1",
57 |     "ts-loader": "^4.5.0",
58 |     "typescript": "^3.0.1",
59 |     "uglifyjs-webpack-plugin": "^0.4.6"
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/pages/home/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title></title>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
 7 |     </head>
 8 |     <body>
 9 |         <div id="cont"></div>
10 |     </body>
11 | </html>


--------------------------------------------------------------------------------
/pages/home/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import 'element-ui/lib/theme-chalk/index.css';
 3 | import ElementUI from 'element-ui';   // 不能使用 分模块导入 ‘element-ui’ ts 会报错，不知所以然。
 4 | 
 5 | Vue.use(ElementUI)
 6 | 
 7 | import index from './index.vue';
 8 | 
 9 | window.onload = function(){
10 |     var app = new Vue({
11 |         el:"#cont",
12 |         render: function(createElement: any){
13 |         return createElement(index)
14 |         }
15 |     })
16 | }


--------------------------------------------------------------------------------
/pages/home/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-loading="loading">
 3 |     <div @click="jump">
 4 |       {{ title }}
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import Vue from 'vue'
11 | import Component from 'vue-class-component'
12 | 
13 | @Component
14 | export default class App extends Vue {
15 |   title: string;
16 |   loading: boolean = false;
17 | 
18 |   constructor() {
19 |     super();
20 |     this.title = 'My Vue and CosmosDB Heroes Appaaa';
21 |   }
22 | 
23 |   jump(): void{
24 |     location.href = '/mobile/test.html'
25 |   }
26 | }
27 | </script>
28 | 
29 | <style lang="less">
30 | body{
31 |   div{
32 |     color: #009ec6;
33 |   }
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/pages/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title></title>
 5 |         <meta charset="UTF-8">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
 7 |     </head>
 8 |     <body>
 9 |         <div id="cont"></div>
10 |     </body>
11 | </html>


--------------------------------------------------------------------------------
/pages/test/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import 'element-ui/lib/theme-chalk/index.css';
 3 | import ElementUI from 'element-ui';   // 不能使用 分模块导入 ‘element-ui’ ts 会报错，不知所以然。
 4 | 
 5 | Vue.use(ElementUI)
 6 | 
 7 | import index from './index.vue';
 8 | 
 9 | window.onload = function(){
10 |     var app = new Vue({
11 |         el:"#cont",
12 |         render: function(createElement: any){
13 |         return createElement(index)
14 |         }
15 |     })
16 | }


--------------------------------------------------------------------------------
/pages/test/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-loading="loading">
 3 |     {{ title }}
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import Vue from 'vue'
 9 | import Component from 'vue-class-component'
10 | 
11 | @Component
12 | export default class App extends Vue {
13 |   title: string;
14 |   loading: boolean = false;
15 | 
16 |   constructor() {
17 |     super();
18 |     this.title = 'Hi welcome to vue and ts and webpack world'; 
19 |   }
20 | }
21 | </script>
22 | 
23 | <style lang="less">
24 | body{
25 |   div{
26 |     color: #009ec6;
27 |   }
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "CommonJS",
 5 |     "moduleResolution": "node",
 6 |     "experimentalDecorators": true,
 7 |     "emitDecoratorMetadata": true,
 8 |     "lib": [
 9 |       "es2015", "dom"
10 |     ]
11 |   },
12 |   "include": [
13 |     "**/*.ts"
14 |   ],
15 |   "exclude": [
16 |     "build",
17 |     "node_modules"
18 |   ]
19 | }


--------------------------------------------------------------------------------
/vendors/public.ts:
--------------------------------------------------------------------------------
 1 | interface obj {
 2 |     type: string,
 3 |     url: string,
 4 |     data?: Object,
 5 |     async: boolean
 6 | }
 7 | 
 8 | function Ajax(obj: obj){
 9 |     this.type = obj.type
10 |     this.url = obj.url
11 |     this.data = obj.data || ''
12 |     this.async = obj.async
13 | }
14 | Ajax.prototype.request = function(cb: (a: Object)=>string){
15 |     var _ = this;
16 |     $.ajax({
17 |         type:_.type,
18 |         url:_.url,
19 |         data:_.data,
20 |         async: _.async,
21 |         timeout: 1000 * 10,
22 |         success:function(result){
23 |             cb(result);
24 |         },
25 |         error:function(err){
26 |             cb(err);
27 |         }
28 |     })
29 | }
30 | 
31 | export = Ajax;  // ts写法       =      module.exports = Ajax


--------------------------------------------------------------------------------
/vendors/url.min.js:
--------------------------------------------------------------------------------
1 | (function(window){var Url=window.Url={};function queryString(name,notDecoded){name=name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var regex=new RegExp("[\\?&]"+name+"=([^&#]*)");var results=regex.exec(location.search);var encoded=null;if(results===null){return""}else{encoded=results[1].replace(/\+/g," ");if(notDecoded){return encoded}return decodeURIComponent(encoded)}}function parseQuery(search){var query={};if(typeof search!=="string"){search=window.location.search}search=search.replace(/^\?/g,"");if(!search){return{}}var a=search.split("&");var b=null;var i=0;var iequ;for(;i<a.length;++i){iequ=a[i].indexOf("=");if(iequ<0)iequ=a[i].length;query[decodeURIComponent(a[i].slice(0,iequ))]=decodeURIComponent(a[i].slice(iequ+1))}return query}function stringify(queryObj){if(!queryObj||queryObj.constructor!==Object){throw new Error("Query object should be an object.")}var stringified="";Object.keys(queryObj).forEach(function(c){stringified+=c+"="+encodeURIComponent(queryObj[c])+"&"});stringified=stringified.replace(/\&$/g,"");return stringified}function updateSearchParam(param,value){var searchParsed=parseQuery();if(value===undefined){delete searchParsed[param]}else{if(searchParsed[param]===value){return Url}searchParsed[param]=value}var newSearch="?"+stringify(searchParsed);window.history.replaceState(null,"",newSearch+location.hash);return Url}function getLocation(){return window.location.pathname+window.location.search+window.location.hash}Url.getLocation=getLocation;Url.updateSearchParam=updateSearchParam;Url.queryString=queryString;Url.parseQuery=parseQuery;Url.stringify=stringify;Url.version="1.2.0"})(window);


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | var path = require('path');
  2 | var webpack = require('webpack');
  3 | var glob = require('glob');
  4 | var htmlWebpackPlugin = require('html-webpack-plugin');
  5 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  6 | var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
  7 | const notifier = require('node-notifier')
  8 | const chalk = require('chalk');
  9 | 
 10 | const isProduction = process.env.NODE_ENV === 'production';
 11 | 
 12 | const CssExtract = new MiniCssExtractPlugin({
 13 |   filename: 'assets/css/[name].css'
 14 | })
 15 | 
 16 | var config = {
 17 |   mode: isProduction ? 'production' : 'development',
 18 |   optimization: {
 19 |     splitChunks: {
 20 |       cacheGroups: {
 21 |         vendors: {
 22 |           test: /\.js$/g,
 23 |           chunks: 'all',
 24 |           name: 'common',
 25 |           minChunks: 1
 26 |         }
 27 |       }
 28 |     }
 29 |   },
 30 |   entry: {
 31 |     url: path.join(__dirname, '/vendors/url.min.js'),
 32 |   },
 33 |   output: {
 34 |     path: path.resolve(__dirname, 'build'),
 35 |     filename: 'assets/js/[name].js',
 36 |     chunkFilename: 'assets/js/chunks/[name].js',
 37 |     publicPath: '/mobile/'
 38 |   },
 39 |   module: {
 40 |     rules: [{
 41 |         test: require.resolve('jquery'),
 42 |         use: [{
 43 |           loader: 'expose-loader',
 44 |           options: 'jQuery'
 45 |         }, {
 46 |           loader: 'expose-loader',
 47 |           options: '$'
 48 |         }]
 49 |       },
 50 |       {
 51 |         test: /\.vue$/,
 52 |         loader: 'vue-loader',
 53 |         options: {
 54 |           loaders: {
 55 |             ts: [{
 56 |               loader: 'ts-loader',
 57 |               options: {
 58 |                 appendTsSuffixTo: [/\.vue$/]
 59 |               }
 60 |             }],
 61 |             less:[{
 62 |               loader: MiniCssExtractPlugin.loader
 63 |             },{
 64 |               loader: 'css-loader'
 65 |             },{
 66 |               loader: 'less-loader'
 67 |             }]
 68 |           }
 69 |         }
 70 |       },
 71 |       {
 72 |         test: /\.ts$/,
 73 |         exclude: /node_modules/,
 74 |         loader: 'ts-loader',
 75 |         options: {
 76 |           appendTsSuffixTo: [/\.vue$/]
 77 |         }
 78 |       }, {
 79 |         test: /\.js$/,
 80 |         loader: 'babel-loader',
 81 |         exclude: /node_modules/
 82 |       },
 83 |       {
 84 |         test: /\.css$/,
 85 |         use: [{
 86 |             loader: MiniCssExtractPlugin.loader
 87 |           },
 88 |           "css-loader"
 89 |         ]
 90 |       },
 91 |       {
 92 |         test: /\.less$/,
 93 |         use: [{
 94 |             loader: MiniCssExtractPlugin.loader
 95 |           },
 96 |           "css-loader",
 97 |           "less-loader"
 98 |         ]
 99 |       },
100 |       {
101 |         test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
102 |         use: [{
103 |           loader: 'file-loader',
104 |           options: {
105 |             outputPath: 'assets/font/'
106 |           }
107 |         }]
108 |       },
109 |       {
110 |         test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
111 |         use: [{
112 |           loader: 'file-loader',
113 |           options: {
114 |             outputPath: 'assets/images/[name].[ext]?[hash]'
115 |           }
116 |         }]
117 |       }
118 |     ]
119 |   },
120 |   plugins: [
121 |     CssExtract,
122 |     new webpack.ProvidePlugin({
123 |       'Vue': ['vue/dist/vue.esm.js', 'default'],
124 |       '$': 'jquery'
125 |     })
126 |   ],
127 |   resolve: {
128 |     extensions: ['.ts', '.js', ".vue", ".json"],
129 |     alias: {
130 |       'vendors': path.join(__dirname, 'vendors')
131 |     }
132 |   },
133 |   devServer: {
134 |     host: 'localhost',
135 |     port: 8100,
136 |     publicPath: '/mobile/',
137 |     stats: {
138 |       colors: true
139 |     },
140 |     disableHostCheck: true,
141 |     proxy: {},
142 |     quiet: true, // necessary for FriendlyErrorsPlugin ^_^
143 |   },
144 |   devtool: 'cheap-module-source-map'
145 | }
146 | 
147 | var entryDir = path.join(__dirname, 'pages/');
148 | var entries = glob.sync(entryDir + '*').map(function (entry) {
149 |   return {
150 |     name: path.basename(entry),
151 |     path: entry
152 |   }
153 | });
154 | entries.forEach(function (entry) {
155 |   //添加entry
156 |   config.entry[entry.name] = [entry.path] + '/index.ts';
157 | 
158 |   //生成html
159 |   config.plugins.push(new htmlWebpackPlugin({
160 |     filename: entry.name + '.html',
161 |     template: entry.path + '/index.html',
162 |     chunks: ['url', 'common', entry.name],
163 |     hash: true,
164 |     minify: {
165 |       removeComments: true,
166 |       collapseWhitespace: true
167 |     }
168 |   }));
169 | });
170 | 
171 | config.plugins.push(new FriendlyErrorsWebpackPlugin({
172 |   compilationSuccessInfo: {
173 |     messages: [`Your application is running here: ${chalk.yellow(`http://${config.devServer.host}:${config.devServer.port}`)}.`],
174 |   },
175 |   onErrors: function (severity, errors) {
176 | 
177 |     return (severity, errors) => {
178 |       if (severity !== 'error') return
179 | 
180 |       const error = errors[0]
181 |       const filename = error.file && error.file.split('!').pop()
182 | 
183 |       notifier.notify({
184 |         title: packageConfig.name,
185 |         message: severity + ': ' + error.name,
186 |         subtitle: filename || '',
187 |         icon: path.join(__dirname, 'logo.png')
188 |       })
189 |     }
190 |   },
191 |   clearConsole: true,
192 | }))
193 | 
194 | module.exports = config;


--------------------------------------------------------------------------------