vue webpack 初始化项目（pc端）

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(),

    ]