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. linux系统如何安装vmware Tools（下面以CentOS为例）

    VMwareTools是VMware虚拟机中很重要的一个工具包,有些时候在虚拟机中安装完操作系统会缺少网卡驱动,不能上网,这时只要安装VMwareTools就可以解决问题,下面以CentOS为例,来说 ...

  2. Linux常见问题及解决方案

    问题一: 删除Linux 的烦恼(没出现系统选择菜单只出现"grub": 问题描述: 安装了Linux.WinXP双系统,采用Grub引导系统.在XP下通过格式化磁盘(非法操作)删 ...

  3. 面向对象的JavaScript-002

    1. <script type="text/javascript"> // Define the Person constructor var Person = fun ...

  4. fitting 方法的异常值过滤

    training = pd.DataFrame({'x':[3,6,9,15,300, 20,85]}).  原始数据training_fitting = pd.DataFrame({'x':[4,7 ...

  5. 白盒测试实践--Day0

    白盒测试实践--Day0 累计完成任务情况: 阶段内容 参与人 开会学习作业要求,取得共识 全体 注: 1."阶段内容"划斜线表示完成. 2.采用倒序. 具体情况: 组长提前组织分 ...

  6. Windows下搭建JSP开发环境

    1. 配置说明: => 编辑器: Eclipse (Java EE IDE) => 数据库: MySQL (MySQL Workbench 进行数据库管理, 用 MySQL Connect ...

  7. javascript总结26:Date

    1 获取Date对象 Date-引用类型,JavaScript中的内置对象 获取当前时间 var date = new Date(); //UTC的时间 //返回数字,时间的毫秒形式 var date ...

  8. Spring 事务不回滚

    为了打印清楚日志,很多方法我都加tyr catch,在catch中打印日志.但是这边情况来了,当这个方法异常时候 日志是打印了,但是加的事务却没有回滚. 例:     类似这样的方法不会回滚 (一个方 ...

  9. Ubuntu使用tzselect修改时区

    1.命令行运行 sudo tzselect 2.选择洲区(这里选择亚洲Asia) waichung@desktop:~$ sudo tzselect [sudo] password for waich ...

  10. strncmp用法说明

    函数原型 int strcmp(char *str1,char * str2,int n) 功能 比较字符串str1和str2的前n个字符. 头文件 #include <string.h> ...