Webpack下创建vue项目-非vue-cli

开始准备

初始化工程目录
```
npm init -y
```
安装vue
```
npm install vue
```
安装 webpack
```
npm install webpack --save-dev
```

webpack 装载各个模块

# 用于解析HTML文件的插件

npm install html-webpack-plugin

# 安装vue项目所需要的loader

npm install css-loader file-loader babel-core babel-loader babel-preset-es2015 vue-loader

# 暂且称为vue模板解析器吧

npm install vue-template-compiler

文件解析

packpage.json

这个文件自动生成的，不用管它。都是你自己填的一些信息

具体内容如下:

{

  "name": "vue-demo2",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

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

    "start":"webpack-dev-server --inline --host localhost --port 7080 --config webpack.config.js"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "webpack": "^4.5.0",

    "webpack-cli": "^2.0.14"

  },

  "dependencies": {

    "babel-core": "^6.26.0",

    "babel-loader": "^7.1.4",

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

    "css-loader": "^0.28.11",

    "file-loader": "^1.1.11",

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

    "vue": "^2.5.16",

    "vue-loader": "^14.2.2",

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

    "webpack-dev-server": "^3.1.3"

  }

}

webpack.config.js

每个工程下都需要有一个叫webpack.config.js 的配置文件.关系到webpack的打包过程。定义入口和输出等

具体内容如下

let Webpack = require('webpack');

let path = require('path');

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

module.exports = {

    mode: 'development',

    entry: './src/index.js',

    output: {

        path: path.resolve(__dirname, 'build'),

        filename: 'index.js'

    },

    module: {

        rules: [

            {

                test: /\.vue$/,

                loader: 'vue-loader'

            },

            {

                test: /\.css$/,

                loader: 'style-loader!css-loader'

            },

            /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */

            {

                test: /\.js$/,

                loader: 'babel-loader',

                /* 排除模块安装目录的文件 */

                exclude: /node_modules/

            }

        ]

    },

    plugins: [

        new HtmlWebpackPlugin({

            template: __dirname + "/index.html" //模板文件.默认会生成index.html文件。你也可以自己制定filename

        }),

    ]

};

代码编写

hello.vue

<template>

<div>

    <h1> {{ message }}</h1>

</div>

</template>

<script>

export default {

  data() {

    return {

      message: "Hello Vue"

    };

  }

};

</script>

<style>

    h1{

        color: brown;

    }

</style>

index.js

import vue from 'vue';//npm 安装过vue.可以直接import

import hello from './vue/hello.vue'

new vue({

    el:'#app',//这个是在模板文件中需要替换的div ID.

     render:function(createElement){

        return createElement(hello);

     }

})

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

</body>

</html>

注意：如果package.js中的脚本名称是start,例子中就是,使用npm start 即可启动,否则使用npm run 脚本名称启动

源代码地址：github

巴特西

Webpack下创建vue项目-非vue-cli

开始准备

文件解析

代码编写

最新文章

热门文章