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. 82. Remove Duplicates from Sorted List II (List)

    Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...

  2. kubernetes基础环境配置

    一.基础环境配置 环境详情 主机名(FQDN) IP地址(NAT) 描述 linux-node1.example.com eth0:192.168.56.11 1VCPU.2G内存.一块硬盘s da5 ...

  3. 19-字符切割函数c++模板

    https://www.cnblogs.com/stonebloom-yu/p/6542756.html #include <cstring> #include <cstdio> ...

  4. 万能头文件#include<bits/stdc++.h>

    最近在打cf时赛后翻阅别人的代码总是会发现一个陌生而奇怪的头文件#include<bits/stdc++.h> 奇怪之处就在于基本上所有的代码只要用了这个头文件就不再写其他头文件了. 百度 ...

  5. 浅谈利用PLSQL的多线程处理机制，加快处理大数据表的效率

    我们在处理大数据表的时候经常会感觉的处理速度不够快,效率不够高,那么今天下面我就来简单实现下PLSQL的多线程编程处理数据: 我模拟一个简单的场景,把某一张表中的数据(当然这张表的数据非常大)同步到目 ...

  6. noi2729 Blah数集

    Blah数集 大数学家高斯小时候偶然间发现一种有趣的自然数集合Blah,对于以a为基的集合Ba定义如下: (1) a是集合Ba的基,且a是Ba的第一个元素: (2)如果x在集合Ba中,则2x+1和3x ...

  7. LIS和LCS LCIS

    首先介绍一下LIS和LCS的DP解法O(N^2) LCS:两个有序序列a和b,求他们公共子序列的最大长度 我们定义一个数组DP[i][j],表示的是a的前i项和b的前j项的最大公共子序列的长度,那么由 ...

  8. 洛谷 P3478 [POI2008]STA-Station

    题目描述 The first stage of train system reform (that has been described in the problem Railways of the ...

  9. [GO]从键盘获取回复的客户端

    package main import ( "net" "fmt" "os" ) func main() { //连接服务器 conn, e ...

  10. aspnetcore的那些actionresult们

    比MVC5多了n个actionresult,傻傻分不清,整理了下,妈妈再也不用担心了 https://docs.asp.net/projects/api/en/latest/autoapi/Micro ...