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

时间 2020-06-22

标签 webpack 建立 vue 项目 cli 繁體版

原文原文链接

开始准备

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

webpack 装载各个模块node

# 用于解析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.jsongit

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

具体内容以下:github

{
  "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.jsweb

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

具体内容以下

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