非脚手架搭建自己的vue

1、创建项目文件夹xxx

2、cd到xxx下:   cmd  回车

3、xxx下运行 npm init  回车  最终生成   package.json

4、你怕吗install --save dev webpack

5、新建  文件夹src   下新建App.vue   main.js  index.html  components文件夹

6、根目录西安新建 webpack.config.js

7、安装依赖报   npm install --save XXX   

>     npm install --save vue
>     npm install --save vue-router
>     npm install --save-dev webpack-dev-server 
>     npm install --save-dev babel-core babel-loader@7.1.5 babel-preset-env
>     npm install --save-dev css-loader style-loader
>     npm install --save-dev less less-loader
>     npm install --save-dev url-loader
>     npm install --save-dev html-webpack-plugin
>     npm install --save-dev vue-loader vue-template-compiler
> 

 

webpack.config.js配置如下

let HtmlWebpackPlugin = require('html-webpack-plugin');
let VueLoaderPlugin = require('vue-loader/lib/plugin');
let Webpack = require('webpack');
module.exports = {
    entry:'./src/main.js',
    output:{
        path:__dirname + './dist',
        filename: "bundle.js"
    },
    devtool:'eval-source-map',
    devServer:{
        contentBase: './src',
        port:8001,
        hot:true,
        open:true,
        inline:true,
        historyApiFallback:true,
        proxy:{
            'api':{
                target:'http://localhost:8000',
                changeOrigin:true,
                secure:false
            }
        }
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['env']
                    }
                },
                exclude:/node_modules/
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-oader','less-loader']
            },
            {
                test:/'\.(png|jpg|gif|woff|ttf)$'/,
                use:'url-loader'
            },
            {
                test:/\.vue$/,
                use:'vue-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new VueLoaderPlugin(),
        new Webpack.HotModuleReplacementPlugin()
    ]
}

热更新   npm install --save-dev webpack

npm install --save-dev webpack-cli

npm install

npm run dev