开始准备

  • 初始化工程目录

    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. 固定定位fixed，绝对定位absolute，相对定位relative；以及overflow

    固定定位position:fixed /*固定定位 1.定位属性值:fixed 2.在页面中不再占位(浮起来了) 3.一旦定位后,定位的布局方位 top.bottom.left.right都能参与布局 ...

  2. springmvc 拦截器不拦截jsp，只拦截控制器的访问

    spring是鼓励把jsp放到WEB-INF文件夹中,然后通过控制器进行访问

  3. 1day:了解python

    一.’计算机语言有哪些? 1.开发语言: 高级语言:Python,Java,PHP,C#,C++,(面向字节码) 低级语言:C.汇编(面向机器码) 备注:机器码是直接和计算机硬件沟通,字节码是通过解释 ...

  4. git工作区和暂存区图

  5. 第二周课堂笔记1th

    1.    三元运算 + 2.      for循环 for为有限循环,while为无限循环 可迭代对象:是字符串,数字不可以 数字不可以迭代但是可以用range函数 for i in range(1 ...

  6. vue 图片懒加载v-lazy

    搬运自:https://blog.csdn.net/twodogya/article/details/80223331 vue v-lazy官方API:https://www.npmjs.com/pa ...

  7. jquery 表单验证插件

    其他: <form action=""> First name: <input type="text" name="FirstNam ...

  8. ie中报错---不能执行已释放 Script 的代码

    我的原因:使用jquery.colorbox.js.在页面中使用弹框,对于父页面中的变量进行修改(弹框页面的js--window.parent.obj.arr= 数组;), 当弹框关闭之后,在父页面中 ...

  9. 使用node.js实现反向代理

    一. 反向代理的应用场景 1. 静态资源与动态资源分离 e.g. 图片服务器 2. AJAX跨域访问 3. 搭建统一服务网关接口 二. 使用node.js实现反向代理 1. 安装http-proxy模 ...

  10. Apache添加多端口及实现单ip多端口映射的方法

    这篇文章主要介绍了Apache添加多端口及实现单ip多端口映射的方法的相关资料,需要的朋友可以参考下(http://www.0831jl.com) 先给大家说下apache添加多端口的方法,具体步骤如 ...