1、命令：vue init webpack pc（项目名称），设置相关配置，生成项目前端文件夹
2、修改config参数
（1）开发环境端口，使用不常用的端口号
（2） assetsPublicPath: './',
3、安装一些插件（jq，scss，element-ui）
（1）安装jq
cnpm install jquery --save-dev
var webpack=require('webpack');
在webpack.base中enter下面加入
plugins: [
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window. jQuery": "jquery"
})
],
（2）安装scss预处理
cnpm install --save-dev css-loader style-loader sass-loader node-sass
extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
cnpm install extract-text-webpack-plugin --save-dev
相关配置
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
....
module: {
loaders: [
//解析.css文件
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style", 'css')
},
//解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及<style lang="sass">...</style>声明的内部样式进行加载
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback:"style-loader",
use: ['css-loader','sass-loader'],
publicPath: "/dist"
})
},
]
},
plugins: [
new ExtractTextPlugin({
filename: "styles.css",
disable: false,
allChunks: true
}),
]
....
}
（3）element-ui 官网有安装教程 （建议最先安装）
（4）html-webpack-plugin 的安装
简单的 cnpm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin(),
]
