开始准备

  • 初始化工程目录

    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. Windows下DNS ID欺骗的原理与实现

    域名系统(DNS)是一种用于TCP/IP应用程序的分布式数据库,它提供主机名字和IP地址之间的转换信息.通常,网络用户通过UDP协议和DNS服务器进行通信,而服务器在特定的53端口监听,并返回用户所需 ...

  2. VS2010-MFC（MFC常用类：CFile文件操作类）

    转自:http://www.jizhuomi.com/software/234.html CFile类概述 如果你学过C语言,应该知道文件操作使用的是文件指针,通过文件指针实现对它指向的文件的各种操作 ...

  3. [kuangbin带你飞]专题一 简单搜索 - E - Find The Multiple

    //Memory Time //2236K 32MS #include<iostream> using namespace std; ]; //保存每次mod n的余数 //由于198的余 ...

  4. zookeeper 选举白话理解

  5. 19.SimLogin_case06

    # 使用自造的cookies登录GitHub import requests from lxml import etree str = '_octo=GH1.1.518803230.153726461 ...

  6. wpf 几种常用控件样式

    转自:http://blog.csdn.net/xuejiren/article/details/39449515

  7. css盒模型问题

    css盒模型问题 1.基本概念:标准模型和ie模型 2.标准模型和ie模型的区别 3.css如果设置这两种模型 4.js如何获取盒模型的宽高 5.边距重叠 6.BFC 1.CSS盒模型本质上是一个盒子 ...

  8. Ip- Linux必学的60个命令

    1.作用 ip是iproute2软件包里面的一个强大的网络配置工具,它能够替代一些传统的网络管理工具,例如ifconfig.route等,使用权限为超级用户.几乎所有的Linux发行版本都支持该命令. ...

  9. Django项目：CMDB(服务器硬件资产自动采集系统)--11--07CMDB文件模式测试采集硬件数据

    #settings.py # ————————01CMDB获取服务器基本信息———————— import os BASEDIR = os.path.dirname(os.path.dirname(o ...

  10. PHP如何打造一个高可用高性能的网站呢？

    https://blog.csdn.net/jwq101666/article/details/80162245 1. 说到高可用的话要提一下redis,用过的都知道redis是一个具备数据库特征的n ...