开始准备

  • 初始化工程目录

    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的更多相关文章

  1. 在使用vue+webpack模版创建的项目中使用font-awesome

    前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...

  2. MyEclipse下创建的项目导入到Eclipse中详细的图文配置方法

    一.情景再现. 有些人比较喜欢用Myeclipse开发,有些人却比较喜欢用eclipse开发.但是其中有一个问题,Myeclipse里面的项目导入的时候出现了一个小小的问题. 如下: 二.说明问题 导 ...

  3. MyEclipse下创建的项目 导入eclipse

    1.导入在MyEclipse下创建的项目 2.把项目变成Web项目,在项目上右键-->Properties-->选择Project Facets-->点击Convert to fac ...

  4. (转)MyEclipse10下创建web项目并发布到Tomcat

    转自:http://blog.sina.com.cn/s/blog_699d3f1b01012spf.html   MyEclipse10下创建web项目并发布到Tomcat 1.软件安装(不作详细描 ...

  5. Eclipse和MyEclipse使用技巧--MyEclipse下创建的项目导入到Eclipse中详细的图文配置方法

    一.情景再现. 有些人比较喜欢用Myeclipse开发,有些人却比较喜欢用eclipse开发.但是其中有一个问题,Myeclipse里面的项目导入的时候出现了一个小小的问题. 如下: 二.说明问题 导 ...

  6. MyEclipse10下创建web项目并发布到Tomcat

    MyEclipse10下创建web项目并发布到Tomcat 1.软件安装(不作详细描述) 2.启动MyEclipse10 3.File-New-Project,选中Web Project,点击Next ...

  7. Vue.js-创建Vue项目（Vue项目初始化）并不是用Webstrom创建，只是用Webstrom打开

    我犯的错误:作为vue小白,并不知道还要单独去创建初始的vue项目,于是自己在webstrom中建了一个Empty Project, 在其中新增了一个js文件,就开始import Vue from “ ...

  8. 构建vue项目（vue 2.x）时的一些配置问题（持续更新）

    基于前文,使用vue-cli脚手架工具构建项目,并使用了webpack,那么我在项目中遇到的一些与配置相关的问题将在这里进行汇总. 1.代码检查问题 由于我们在构建项目时,使用了Eslint对我们的项 ...

  9. 【VueJS】windows环境安装vue-cli及webpack并创建VueJS项目

    1. 安装node.js, Node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 这次node.js不是主角,默认已安装好了,通过npm –v查看no ...

随机推荐

  1. 几个 GetHashCode 函数

    几个 GetHashCode 函数: DBTables.pas Delphi/Pascal code   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  2. 夏令营501-511NOIP训练18——高三楼

    传送门:QAQQAQ 题意:定义矩阵A与矩阵B重复,当且仅当A可以通过任意次行列交换得到B,例如下图A,B即为合法矩阵 现求对于$n*n$的矩阵有多少个不重复的矩阵 数据范围: 对于10%的数据 N≤ ...

  3. Oracle如何用单字段或多字段进行查重

    最近在整理数据形成信用报告,发现重复的数据真的多,梳理都好久.我就做个笔记把去掉重复数据的方法整理下来.方便我后期查阅. 我将我目前已知的两种去重方法分为:视图去重和表去重.原理就是有无rowid这个 ...

  4. UMP系统功能 分库分表

  5. 【珍惜时间】vuepro

    老规矩放上大大的github开源地址:https://github.com/goodheart222/vuepro 我们再来看看项目的效果,初步根据效果做到心中有数 看到效果的话,我们会发现,肯定是有 ...

  6. Android开发 StateListDrawable详解

    前言 StateListDrawable是与xml中的selector属性对应代码实现类,它需要配合GradientDrawable的使用,如果你还不了解GradientDrawable可以参考我的另 ...

  7. [转].NET Framework 4.5 五个很棒的特性

    自.NET 4.5发布已经过了差不多1年了.但是随着最近微软大多数的发布,与.NET开发者交流的问题显示,开发者仅知道一到两个特性,其他的特性仅仅停留在MSDN并以简单的文档形式存在着. 比如说,当你 ...

  8. DRF 请求生命周期以及各模块解析

    目录 rest_framework框架的封装特点 原生Django与DRF比较 APIView 的请求生命周期 请求模块(request) 解析模块(parser_classes) 异常模块(exce ...

  9. ros python

    https://www.ncnynl.com/archives/201611/1059.html python的节点需要对节点设置权限为可执行,在.py文件所在的路径执行如下命令 $ touch ta ...

  10. Laravel移除Cache-Control

    碰到一个问题,网站上线后,需要移除Cache-Control,就是下面这个东西 方案1 失败 参考网址:https://stackoverflow.com/questions/51821563/lar ...