开始准备

  • 初始化工程目录

    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. 详解JDBC与Hibernate区别

    详解JDBC与Hibernate区别 引用地址:http://www.cnblogs.com/JemBai/archive/2011/04/13/2014940.html 刚开始学习JAVA时,认为H ...

  2. pycharm for mac安装

    http://www.xue51.com/mac/5604.html

  3. Linux 中执行Shell 脚本的方式（三种方法）

    Shell 脚本的执行方式通常有如下三种: (1)bash script-name 或者 sh script-name:(2)path/script-name或者./script-name:(3)so ...

  4. 19.SimLogin_case04

    # 利用cookies登录马蜂窝 import requests from lxml import etree session = requests.Session() phone_number = ...

  5. P1736 创意吃鱼法 /// DP

    题目大意: https://www.luogu.org/problemnew/show/P1736 题解 dplr[][] 当前点左边(副对角线时为右边)有多少个连续的0 dpup[][] 当前点上边 ...

  6. 机器学习-线性回归算法（单变量）Linear Regression with One Variable

    1 线性回归算法 http://www.cnblogs.com/wangxin37/p/8297988.html 回归一词指的是,我们根据之前的数据预测出一个准确的输出值,对于这个例子就是价格,回归= ...

  7. GROUP方法也是连贯操作方法之一

    GROUP方法也是连贯操作方法之一,通常用于结合合计函数,根据一个或多个列对结果集进行分组 . group方法只有一个参数,并且只能使用字符串. 例如,我们都查询结果按照用户id进行分组统计: $th ...

  8. CF148D Bag of mice (期望dp)

    传送门 # 解题思路 ​    ~~这怕是本蒟蒻第一个独立做出来的期望$dp$的题,发篇题解庆祝一下~~.首先,应该是能比较自然的想出状态设计$f[i][j][0/1]$ 表示当前还剩 $i$个白老鼠 ...

  9. 深入浅出 Java Concurrency (24): 并发容器 part 9 双向队列集合 Deque[转]

    有一段时间没有更新了.接着上节继续吧. Queue除了前面介绍的实现外,还有一种双向的Queue实现Deque.这种队列允许在队列头和尾部进行入队出队操作,因此在功能上比Queue显然要更复杂.下图描 ...

  10. JDK源码阅读--HashMap

    public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Cloneable, ...