https://github.com/zhoou/vue-cli-typescript-webpack-demo
A demo with Typescript 2.x + Vue2.x + Vue-router + Vuex + Webpack 3.x + SCSS + Flex-layout + Axios + Vue-i18n + Element-UI
https://github.com/zhoou/vue-cli-typescript-webpack-demo
axios css3 element-ui flex scss typescript vue vue-cli vue-i18n vue-router vuex webpack
Last synced: 3 months ago
JSON representation
A demo with Typescript 2.x + Vue2.x + Vue-router + Vuex + Webpack 3.x + SCSS + Flex-layout + Axios + Vue-i18n + Element-UI
- Host: GitHub
- URL: https://github.com/zhoou/vue-cli-typescript-webpack-demo
- Owner: zhoou
- Created: 2018-05-18T03:46:30.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-22T03:50:24.000Z (about 8 years ago)
- Last Synced: 2025-05-22T02:40:56.023Z (about 1 year ago)
- Topics: axios, css3, element-ui, flex, scss, typescript, vue, vue-cli, vue-i18n, vue-router, vuex, webpack
- Language: JavaScript
- Homepage:
- Size: 308 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-cli-typescript-webpack-demo
> A Vue.js project with vue-cli + typescript + scss + webpack.
## Init
``` bash
npm install vue-cli -g
vue init webpack projectName
npm install typescript ts-loader --save
npm install vue-class-component vue-property-decorator --save
```
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
## Webpack Configuration Optimization
* 1、Remove extra css
``` bash
const glob = require('glob');
const PurifyCssPlugin = require('purifycss-webpack');
...
plugins: [
...
new PurifyCssPlugin({
paths: glob.sync(resolve('src/*.html'))
}),
...
]
```
* 2、[happypack](https://github.com/amireh/happypack)
``` bash
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({
size: os.cpus().length > 4 ? 4 : os.cpus().length
})
...
module: {
rules: [
...
{
test: /\.js$/,
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
use: 'happypack/loader?id=happy-js',
// loader: 'babel-loader',
},
...
]
}
...
plugins: [
...
new HappyPack({
id: 'happy-js',
loaders: ['babel-loader'],
threadPool: happyThreadPool,
verbose: true
}),
...
]
```
* 3、webpack.DllPlugin and webpack.DllReferencePlugin
(1) create dll.config.
reference document： ```build/webpack.dll.conf.js```
(2) add plugin to ```build/webpack.dev.conf.js```
``` bash
plugins: [
...
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '.'),
manifest: require(path.resolve(__dirname, '../static', 'vendor.manifest.json'))
}),
...
]
```
(3) add link to html file. (we can use : [add-asset-html-webpack-plugin](https://github.com/SimenB/add-asset-html-webpack-plugin))
``` bash
plugins: [
...
new AddAssetHtmlPlugin({
includeSourcemap: false,
filepath: path.resolve(__dirname, '../static', '*.dll.js'),
}),
...
]
```
## Problems
``` bash
Error 1：Module build failed: TypeError: Cannot read property 'vue' of undefined
Env: webpack 4.8.x
Solution： change webpack 4.x => webpack 3.x, webpack-dev-server 3.x => webpack-dev-server 2.x, ts-loader 4.x => ts-loader 3.x
```
``` bash
Error 2: Cannot find module 'webpack/schemas/WebpackOptions.json'
Env: webpack 3.11.0
Solution：re-install webpack
```
``` bash
Error 3: "$bg-color: #fefefe;": Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
Solution: Maybe your webpack.base.conf is merged with another config where there is another rule for .scss files.
```
``` bash
Error 4: Cannot destructure property `createHash` of 'undefined' or 'null'.
Solution: it's need to update wepback to ^4.3.0 or laster
```