VUE实战第一天-知乎日报项目开发

第一步配置webpack：

     打开命令行，在指定文件夹下运行npm init,直接回车

    npm install --save-dev webpack

     npm install --save-dev -webpack-dev-server

在package.json里配置dev：webpack-dev-server --open --config webpack.config.js

新建文档webpack.config.js

var path = require('path');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

 

var config = {

entry: {

main: './main'

},

output: {

path: path.join(__dirname, './dist'),

publicPath: '/dist/',

filename: 'main.js'

},

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: {

loaders: {

css: ExtractTextPlugin.extract({

use: 'css-loader',

fallback: 'vue-style-loader'

})

}

}

},

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},

{

test: /\.css$/,

use: ExtractTextPlugin.extract({

use: 'css-loader',

fallback: 'style-loader'

})

},

{

test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,

loader: 'url-loader?limit=1024'

}

]

},

plugins: [

new ExtractTextPlugin("main.css")

]

};

 

module.exports = config;

下载插件 npm install --save-dev extract-text-webpack-plugin

package.json配置如下：

{

"name": "daily",

"version": "1.0.0",

"description": "daily",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",

"build": "webpack --progress --hide-modules --config webpack.prod.config.js"

},

"author": "",

"license": "ISC",

"devDependencies": {

"babel": "^6.23.0",

"babel-core": "^6.24.0",

"babel-loader": "^6.4.1",

"babel-plugin-transform-runtime": "^6.23.0",

"babel-preset-es2015": "^6.24.0",

"babel-runtime": "^6.23.0",

"css-loader": "^0.27.3",

"extract-text-webpack-plugin": "^2.1.0",

"file-loader": "^0.10.1",

"html-webpack-plugin": "^2.28.0",

"request": "^2.81.0",

"style-loader": "^0.16.1",

"url-loader": "^0.5.8",

"vue-hot-reload-api": "^2.0.11",

"vue-loader": "^11.3.4",

"vue-style-loader": "^2.0.5",

"vue-template-compiler": "^2.2.6",

"webpack": "^2.3.2",

"webpack-dev-server": "^2.4.2",

"webpack-merge": "^4.1.0"

},

"dependencies": {

"axios": "^0.16.1",

"vue": "^2.2.6"

}

}

直接npm install安装所需模块