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

最新推荐文章于 2024-07-12 10:43:17 发布

aide2955

最新推荐文章于 2024-07-12 10:43:17 发布

阅读量160

点赞数

文章标签： javascript webpack shell ViewUI

原文链接：http://www.cnblogs.com/coder163/p/8782324.html

版权

开始准备

初始化工程目录
shell 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

转载于:https://www.cnblogs.com/coder163/p/8782324.html

aide2955

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack下创建vue项目-非vue-cli

开始准备初始化工程目录shell npm init -y安装vuenpm install vue安装 webpacknpm install webpack --save-devwebpack 装载各个模块# 用于解析HTML文件的插件npm install html-webpack-plugin# 安装vue项目所需要的loadernpm install cs...
复制链接

扫一扫