├── src
├── entry.js
├── App.vue
├── views
│ └── index.vue
├── app.js
├── package.json
└── router
│ └── index.js
├── .gitignore
├── index.html
├── .babelrc
├── package.json
└── webpack.config.js
/src/entry.js:
--------------------------------------------------------------------------------
1 | import { app } from './app.js'
2 |
3 | app.$mount('#app');
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
9 |
--------------------------------------------------------------------------------
/src/views/index.vue:
--------------------------------------------------------------------------------
1 |
2 | hello world!!!!
3 |
4 |
5 |
8 |
9 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import router from './router'
3 |
4 | import App from './App.vue'
5 |
6 | const app = new Vue({
7 | router,
8 | ...App
9 | });
10 |
11 | export {app, router}
12 |
--------------------------------------------------------------------------------
/src/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "src",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "app.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC"
12 | }
13 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", { "modules": false }],
4 | "stage-2"
5 | ],
6 | "plugins": ["transform-runtime"],
7 | "comments": false,
8 | "env": {
9 | "test": {
10 | "presets": ["env", "stage-2"],
11 | "plugins": [ "istanbul" ]
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 |
4 | Vue.use(Router);
5 |
6 | import Index from '../views/index.vue'
7 |
8 | export default new Router({
9 | mode: 'hash',
10 | routes: [
11 | {
12 | path: '/',
13 | name: 'index',
14 | component: Index,
15 | },
16 | {
17 | path: '*', redirect: '/',
18 | }
19 | ]
20 | })
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-project",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "webpack.config.js",
6 | "scripts": {
7 | "dev": "webpack-dev-server",
8 | "build": "webpack"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "babel-core": "^6.25.0",
15 | "babel-loader": "^7.0.0",
16 | "babel-plugin-transform-runtime": "^6.22.0",
17 | "babel-preset-env": "^1.3.2",
18 | "babel-preset-stage-2": "^6.22.0",
19 | "babel-register": "^6.22.0",
20 | "cross-env": "^5.0.0",
21 | "css-loader": "^0.28.4",
22 | "extract-text-webpack-plugin": "^2.1.0",
23 | "html-webpack-plugin": "^2.28.0",
24 | "rimraf": "^2.6.1",
25 | "style-loader": "^0.18.2",
26 | "vue-loader": "^12.2.1",
27 | "vue-template-compiler": "^2.3.4",
28 | "webpack": "^2.6.1",
29 | "webpack-dev-server": "^2.5.0"
30 | },
31 | "dependencies": {
32 | "vue": "^2.3.4",
33 | "vue-router": "^2.5.3"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const HTMLPlugin = require('html-webpack-plugin');
4 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
5 |
6 | const env = process.env.NODE_ENV;
7 |
8 | module.exports = {
9 | entry: {
10 | main: './src/entry.js',
11 | vendor: ['vue', 'vue-router'], // 第三方依赖名
12 | },
13 | output: {
14 | filename: '[name].[chunkhash:5].js', // 输出文件名
15 | path: path.resolve(__dirname, 'dist')
16 | },
17 | module: {
18 | rules: [{
19 | test: /\.css$/,
20 | loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
21 | }, {
22 | test: /\.vue$/,
23 | loader: 'vue-loader',
24 | },
25 | {
26 | test: /\.js$/,
27 | loader: 'babel-loader',
28 | exclude: /node_modules/,
29 | }]
30 | },
31 | plugins: [
32 | new HTMLPlugin({
33 | title: 'webpack项目',
34 | template: 'index.html'
35 | }),
36 |
37 | new webpack.optimize.CommonsChunkPlugin({
38 | names: ['vendor', 'manifest'],
39 | }),
40 |
41 | new ExtractTextPlugin({
42 | filename: 'styles.[chunkhash:5].css',
43 | }),
44 |
45 | new webpack.DefinePlugin({
46 | 'process.env.NODE_ENV': JSON.stringify(env),
47 | }),
48 | ]
49 | }
50 |
--------------------------------------------------------------------------------