开始准备

  • 初始化工程目录

    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. <a>标签的SEO优化细节

    <a>标签的SEO优化细节 如果需要在新窗口中打开链接,我们使用的方法是在a上加上taget=“_blank”,但很多人不知道这是不符合w3c的规范的,在使用严格的DOCTYPE(xhtm ...

  2. java-day05

    数组概念 是一种容器,能够存放多个数据值 特点 多个数据值类型必须统一 是一种引用数据类型 程序运行时,数组长度不可改变 数组初始化 动态初始化格式 数据类型[] 数组名称 = new 数据类型[数组 ...

  3. 调试存储过程与declare语句差异

     当应用有调用存储过程,而节点有几十个或者上百个,找错是不是一个很麻烦的事情,这个时候,我建议写到数据库中,下面是我做的一个demo. 1. 建立错误日志记录表 drop table PUB_PROC ...

  4. T2960 全民健身【思维Dp，预处理，差分优化】

    Online Judge:YCJSOI Label:Dp,思维题,预处理,滚动优化 题目描述 乐乐现在掌管一个大公司,办公楼共有n层.为了增加员工的身体素质,他决定在每层楼都建立一个活动室,活动室分乒 ...

  5. 180608发现的一个有趣的Douyin-Bot项目

    今日发现的github 项目 Douyin-Bot 抖音机器人发现漂亮小姐姐 :sweat_smile: 在开发者模式下,找到指针位置,开启之后,当点击屏幕时,可以获取点击屏幕处的xy坐标了 我使用的 ...

  6. MongDB4.1-入门学习之下载安装配置

    下载安装配置三步走 下载,MongoDB官网下载中心 下载_.msi_安装版 安装,注意以下几个步骤: Choose Setup Type: Please Choose Custom Custom S ...

  7. 树形dp——cf1029E

    题解给出的是带log的,,我自己写了个on的.. #include<bits/stdc++.h> #include<vector> using namespace std; # ...

  8. 小程序关闭时暂停webview里的音乐

    document.addEventListener("visibilitychange", () => {  if(document.hidden) {     // 页面被 ...

  9. MySQL：MySQL 存储过程

    ylbtech-MySQL:MySQL 存储过程 1.返回顶部 1. MySQL 存储过程 MySQL 5.0 版本开始支持存储过程. 存储过程(Stored Procedure)是一种在数据库中存储 ...

  10. 浅谈response和request方法

    一:概述 Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象. 按这个理解的话一次请求生成一个request和res ...