手动创建webpack+vue项目

想要创建vue项目有两种方式，一种是使用vue官方提供的脚手架vue-cli，这种方式比较简单，今天我们要说的是第二种方式：使用webpack+vue手动创建vue项目。

1.创建一个webpack_vue_demo文件夹作为vue项目的根目录

2.打开命令行窗口切换到webpack_vue_demo目录下执行npm init -y命令初始化项目

3.执行npm install安装依赖包

4.创建项目目录结构

5.执行下面的命令安装相关的包

//安装vue和vue-loader

npm install vue vue-loader -D  

//安装webpack相关包

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

//安装vue模版解析器

npm install vue-template-compiler

//安装style-loader和css-loader

npm install style-loader css-loader --save-dev

6.在webpack.config.dev.js文件中加入如下代码：

const path = require("path");

const VueLoaderPlugin = require('vue-loader/lib/plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    mode:"development",

    entry:"./src/main.js",

    output: {

        path: path.join(__dirname,"dist"),

        filename: "bundle.js"

    },

    module: {

        rules:[

            { test:/\.css$/, use: ["style-loader", "css-loader"] },

            { test: /\.vue$/, use: ["vue-loader"] }

        ]

    },

    plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin({                     template:'./template.html' }) ]

}

7.在package.json文件中的sctipts项中加入下面代码：

"dev": "webpack-dev-server --progress --config webpack.config.dev.js --open --hot"

8. main.js的代码如下：

import Vue from 'vue'

import App from './App.vue'

new Vue({

    el:"#app",

    render:h=>h(App)

})

9.App.vue中的代码如下：

<template>

    <div>Hello Vue</div>

</template>

10.template.html文件中加入<div id="app"></div>作为渲染vue应用的容器

最后，在命令行中执行npm run dev命令即可运行vue项目并实现了热更新