├── .babelrc
├── .gitignore
├── README.md
├── index.html
├── package.json
├── src
├── App.css
├── App.vue
└── main.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-2"],
3 | "plugins": ["transform-runtime"]
4 | }
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # css-modules-vue-demo
2 |
3 | > css modules use vue
4 |
5 | ## Build Setup
6 |
7 | ``` bash
8 | # install dependencies
9 | npm install
10 |
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 |
14 | # build for production with minification
15 | npm run build
16 | ```
17 |
18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
19 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | css-modules-vue-demo
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "css-modules-vue-demo",
3 | "description": "css modules use vue",
4 | "author": "zhouwenbin",
5 | "scripts": {
6 | "dev": "webpack-dev-server --inline --hot",
7 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
8 | },
9 | "dependencies": {
10 | "vue": "^1.0.0"
11 | },
12 | "devDependencies": {
13 | "babel-core": "^6.0.0",
14 | "babel-loader": "^6.0.0",
15 | "babel-plugin-transform-runtime": "^6.0.0",
16 | "babel-preset-es2015": "^6.0.0",
17 | "babel-preset-stage-2": "^6.0.0",
18 | "babel-runtime": "^5.8.0",
19 | "cross-env": "^1.0.6",
20 | "css-loader": "^0.23.0",
21 | "extract-text-webpack-plugin": "^0.9.1",
22 | "file-loader": "^0.8.4",
23 | "json-loader": "^0.5.4",
24 | "style-loader": "^0.13.0",
25 | "url-loader": "^0.5.7",
26 | "vue-hot-reload-api": "^1.2.0",
27 | "vue-html-loader": "^1.0.0",
28 | "vue-loader": "^7.3.0",
29 | "webpack": "^1.12.2",
30 | "webpack-dev-server": "^1.12.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .red{
2 | color: red;
3 | }
4 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
{{ msg }}
4 |
5 |
6 |
7 |
18 |
19 |
24 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 |
4 | new Vue({
5 | el: 'body',
6 | components: { App }
7 | })
8 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
4 |
5 | module.exports = {
6 | entry: './src/main.js',
7 | output: {
8 | path: path.resolve(__dirname, './dist'),
9 | publicPath: '/dist/',
10 | filename: 'build.js'
11 | },
12 | module: {
13 | loaders: [
14 | {
15 | test: /\.vue$/,
16 | loader: 'vue'
17 | },
18 | {
19 | test: /\.js$/,
20 | loader: 'babel',
21 | exclude: /node_modules/
22 | },
23 | {
24 | test: /\.json$/,
25 | loader: 'json'
26 | },
27 | {
28 | test: /\.(png|jpg|gif|svg)$/,
29 | loader: 'url',
30 | query: {
31 | limit: 10000,
32 | name: '[name].[ext]?[hash]'
33 | }
34 | },
35 | {
36 | test: /\.css$/,
37 | loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
38 | }
39 | ]
40 | },
41 | devServer: {
42 | historyApiFallback: true,
43 | noInfo: true
44 | },
45 | devtool: '#source-map'
46 | }
47 |
48 | if (process.env.NODE_ENV === 'production') {
49 | // http://vuejs.github.io/vue-loader/workflow/production.html
50 | module.exports.plugins = (module.exports.plugins || []).concat([
51 | new webpack.DefinePlugin({
52 | 'process.env': {
53 | NODE_ENV: '"production"'
54 | }
55 | }),
56 | new webpack.optimize.UglifyJsPlugin({
57 | compress: {
58 | warnings: false
59 | }
60 | }),
61 | new webpack.optimize.OccurenceOrderPlugin()
62 | ])
63 | }
64 |
--------------------------------------------------------------------------------