vue到现在已经成为一个热门的框架，在项目实践当中，如果想要创建一个新项目，通常都会使用vue-cli的脚手架工具，毋容置疑能够方便很多，很多东西也不需要自己亲自去配置。都知道，脚手架其实是vue结合webpack去实现的。在这里，我就想写一篇从零创建vue结合webpack项目的文章，跟大家学习分享。

一、首先来整理个最简单的目录结构

|-index.html
    |-main.js
    |-App.vue
    |-package.json
    |-webpack.config.js

首先需要个index.html的最终打开页面，然后有一个main.js的js入口文件，还有一个vue后缀的vue文件（vue组件化开发少不了的vue后缀文件），还要一个package.json的工程文件（记录你项目名称、依赖、配置等信息的文件，这里用npm init生成），最后当然少不了的webpack配置文件。

到这里第一步完成。

二、安装webpack及webpack-dev-server

npm install webpack webpack-dev-server --save-dev（或cnpm install webpack webpack-dev-server --save-dev）

运行webpack-dev-server --inline --hot --port 8083

三、安装各种依赖。

首先是各种各样的loder和babel编译所需要的包，这里简单列举一下：

vue-loader、vue-html-loader、css-loader、vue-style-loader、babel-loader等loader和vue-hot-reload-api

babel-core、babel-plugin-transform-runtime、babel-preset-es2015、babel-runtime（具体哪个什么功能自行查找了，不是范围内……）

一次性全部安装

cnpm install vue-loader vue-html-loader css-loader vue-style-loader babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime vue-hot-reload-api --save-dev

（由于版本问题，以免带来问题，推荐使用我找的版本，也是试了好久……）

贴一下package.json

{

  "name": "test",

  "version": "1.0.0",

  "description": "",

  "main": "main.js",

  "scripts": {

    "dev": "webpack-dev-server --inline --hot --port 8083"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-core": "^6.17.0",

    "babel-loader": "^6.2.5",

    "babel-plugin-transform-runtime": "^6.15.0",

    "babel-preset-es2015": "^6.16.0",

    "babel-runtime": "^6.11.6",

    "css-loader": "^0.25.0",

    "vue-hot-reload-api": "^1.3.2",

    "vue-html-loader": "^1.2.3",

    "vue-loader": "^8.5.4",

    "vue-style-loader": "^1.0.0",

    "webpack": "^1.13.3",

    "webpack-dev-server": "^1.16.2"

  },

  "dependencies": {

    "vue": "^2.6.7"

  }

}

package.json

别忘了安装vue……

cnpm install vue --save，ok，依赖准备就绪

四、编写webpack.config.js

入口文件是main.js，输出文件bundle.js，同时配置好vue文件的loader和js的loader，代码如下

module.exports={

    entry:'./main.js',

    output:{

        path:__dirname,

        filename:'bundle.js'

    },

    resolve: {

        alias: {

            'vue': 'vue/dist/vue.js'

        }

    },

    module:{

        loaders:[

            {test:/\.vue$/, loader:'vue'},

            {test:/\.js$/, loader:'babel', exclude:/node_modules/}

        ]

    },

    babel:{

        presets:['es2015'],

        plugins:['transform-runtime']

    }

};

五、编写其他页面

index.html页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

    <script src="bundle.js"></script>

</body>

</html>

main.js

import Vue from 'vue'

import App from './App.vue'

new Vue({

    el:'#app',

    components:{App},

    template: '<App/>'

});

App.vue

<template>

    <h1>{{msg}}</h1>

</template>

<script>

    export default{

        data(){

            return {

                msg:'welcome Vue ^_^'

            }

        }

    }

</script>

<style>

    body{

        background: #ccc

    }

</style>

六、运行及查看

使用vue+webpack从零搭建项目的更多相关文章

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

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

  2. Vue开篇之Vue-cli搭建项目

    介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 第一步:安装node ...

  3. 使用vue-cli（vue脚手架）快速搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的 ...

  4. vue cli4.0 快速搭建项目详解

    搭建项目之前,请确认好你自己已经安装过node, npm, vue cli.没安装的可以参考下面的链接安装. 如何安装node? 安装好node默认已经安装好npm了,所以不用单独安装了. 如何安装v ...

  5. vue cli3.0快速搭建项目详解（强烈推荐）

    这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...

  6. 【vue】---- 新版脚手架搭建项目流程详解

    一.概述 本文将介绍vue项目完整的搭建流程,在使用新版本的脚手架基础上,进行了一系列的完善和配置.主要内容如下: 1.项目初始化 安装脚手架 创建项目 项目结构 2.项目搭建配置 引入第三方插件 路 ...

  7. 让我们用Vue cli全家桶搭建项目

    一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...

  8. vue入门1（搭建项目）

    安装node.js 安装cnpm npm install -g cnpm --registry=http://registry.npm.taobao.org 安装vue-cli脚手架构建工具 npm ...

  9. vue简单的脚手架搭建项目

    第一步 node环境安装 1.如果本机没有安装node运行环境,下载node安装包进行安装 下载地址:https://nodejs.org/en/或者http://nodejs.cn/ 第二步 nod ...

随机推荐

  1. selenium3 下载、配置

    s1-s3发展历程  : http://www.cnblogs.com/hhudaqiang/p/6550135.html 官网地址:http://www.seleniumhq.org/文档:http ...

  2. 启动日志中就出现[java:comp/env/spring.liveBeansView.mbeanDomain] not found这个日志

    今天在做一个dubbo服务端的时候,启动成功,dubbo也注册成功,但是启动日志中就出现[java:comp/env/spring.liveBeansView.mbeanDomain] not fou ...

  3. IOS 获取农历方法（转）

    声明:以下为使用iOS的 NSChineseCalendar 网上之前发现有人说这个方法不是完全准确,有些日期会显示的不对,本人没有验证过,也实在懒得用C++那套方法去实现. 另外我做的不过是个简单的 ...

  4. VS2017在Release下编译错误C1001

    在使用VS2017编译C程序时,Debug模式下编译链接执行都没有问题,但是一转到Release模式下就出现下列编译链接错误(IDE:VS2017 /VC++/MFC程序,目标平台x86+Win32位 ...

  5. Linux下安装Nginx详细图解教程(一)

    什么是Nginx? Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器,在高连接并发的情况下N ...

  6. Linux下查看Nginx的并发连接数和连接状态-乾颐堂

    Linux下查看Nginx等的并发连接数和连接状态. 1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$N ...

  7. cakephp中sql查询between

    $trading_list = $this->Trading->find('all', array('conditions' => array('buy_time BETWEEN ? ...

  8. LWIP带UCOS操作系统移植

    LWIP支持RAW.NETCONN.SOCKET这三种编程接口,后两者必须有操作系统来支持的:LWIP带操作系统的移植很重要!!

  9. 常用数据库连接池 (DBCP、c3p0、Druid) 配置说明.RP

    1. 引言 1.1 定义 数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库 ...

  10. python 学习之路开始了

    python 学习之路开始了.....记录点点滴滴....