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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。