├── README.md ├── app └── main.js ├── public └── index.html ├── components └── app.vue ├── package.json └── webpack.config.js /README.md: -------------------------------------------------------------------------------- 1 | # vue-simple-project 2 | 浏览器自动刷新，多页面开发，.vue组件化开发, 3 | 4 | git clone 到本地， 5 | 6 | 然后 npm install ,安装依赖。 7 | 8 | 然后直接运行 npm start , 9 | 10 | 在浏览器里打开 localhost:3030 11 | -------------------------------------------------------------------------------- /app/main.js: -------------------------------------------------------------------------------- 1 | var Vue = require('vue'); 2 | var App = require('../components/app.vue'); 3 | 4 | new Vue({ 5 | el:"#app", 6 | data:{ 7 | 8 | }, 9 | components:{ 10 | app:App, 11 | } 12 | }) -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 |
9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /components/app.vue: -------------------------------------------------------------------------------- 1 | 4 | 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pl", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --inline" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "css-loader": "^0.26.0", 14 | "style-loader": "^0.13.1", 15 | "vue": "^1.0.18", 16 | "vue-loader": "^1.1.0", 17 | "webpack": "^1.13.3", 18 | "webpack-dev-server": "^1.16.2" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | devtool: 'eval-source-map', 3 | entry: { 4 | 5 | bundle1:__dirname + "/app/main.js", 6 | }, 7 | output: { 8 | path: __dirname + "/public",//打包后的文件存放的地方 9 | filename: "[name].js"//打包后输出文件的文件名 10 | }, 11 | module: {//在配置文件里添加JSON loader 12 | loaders: [ 13 | { 14 | test: /\.vue$/, 15 | loader: "vue-loader" 16 | }, 17 | { test: /\.css$/, loader: 'style-loader!css-loader' }, 18 | ] 19 | }, 20 | devServer: { 21 | contentBase:'./public',//本地服务器所加载的页面所在的目录 22 | port:'3030', 23 | colors: true,//终端中输出结果为彩色 24 | historyApiFallback: true,//不跳转 25 | inline: true//实时刷新 26 | } 27 | } --------------------------------------------------------------------------------