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. c++ 备忘录模式（memento）

    备忘录模式:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对象恢复到原先保存的状态[DP].举个简单的例子,我们玩游戏时都会保存进度,所保存的进度以文件的 ...

  2. c语言条件编译#ifdef与#if defined

    c语言条件编译#ifdef与#if defined   c语言条件编译#ifdef与#if defined 摘自:https://www.cnblogs.com/zhangshenghui/p/566 ...

  3. CentOS 7搭建FTP服务器

    安装vsftpd 命令:yum -y install vsftpd 修改ftp配置文件 命令:vim /etc/vsftpd/vsftpd.conf 按i进入insert模式后,按以下要求修改 ano ...

  4. 【转载】Redis优化经验

    转载地址:http://blog.sina.com.cn/s/blog_4be888450100z2ze.html 内存管理优化 Redis Hash是value内部为一个HashMap,如果该Map ...

  5. javascript总结25:Array的5中迭代方法: every(), filter() , forEach() map() some()

    1 Array常用的操作方法: 1 操作方法 - concat() //把参数拼接到当前数组 -slice() //从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开 ...

  6. 一个简单的编译tex的Makefile

    tex编译成pdf通常要经过以下步骤:tex-->dvi-->ps-->pdf.如果修改了tex文件想看一下效果,就要把命令重新敲一遍.虽然就几行命令,反复敲还是很烦人的.最直接的办 ...

  7. 编写高质量代码改善C#程序的157个建议——建议148：不重复代码

    建议148:不重复代码 如果发现重复的代码,则意味着我们需要整顿一下,在继续前进. 重复的代码让我们的软件行为不一致.举例来说,如果存在两处相同的加密代码.结果在某一天,我们发现加密代码有个小Bug, ...

  8. 编写高质量代码改善C#程序的157个建议——建议86：Parallel中的异常处理

    建议86:Parallel中的异常处理 建议85阐述了如何处理Task中的异常.由于Task的Start方法是异步启动的,所以我们需要额外的技术来完成异常处理.Parallel相对来说就要简单很多,因 ...

  9. eclipse配置tomcat 8.0.24服务器

    开发j2ee,肯定需要web容器来运行web项目,目前web容器有tomcat,jetty,Jboss,weblogic等服务器,最为常用的是tomcat服务器,其与eclipse的配置如下: tom ...

  10. 从Entity Framework的实现方式来看DDD中的repository仓储模式运用

    一:最普通的数据库操作 static void Main(string[] args) { using (SchoolDBEntities db = new SchoolDBEntities()) { ...