Vue+webpack+babel环境搭建

github地址

https://github.com/haoyongliang/webpack-babel-Vue

1.首先要了解Vue项目结构

  1. 简单的目录结构:
    2. 

  2.     |-index.html
    3. 

  3.     |-main.js    入口文件
    4. 

  4.     |-App.vue    vue文件，官方推荐命名法
    5. 

  5.     |-package.json    工程文件(项目依赖、名称、配置)npm init --yes 生成
    6. 

  6.     |-webpack.config.js    webpack配置文件

2.在webpack.config.js中指定入口文件和输出文件

  1. module.exports = {
    2. 

  2.   entry:'./main.js',//指定入口文件
    3. 

  3.   output : {
    4. 

  4.         path:__dirname,
    5. 

  5.         filename:'boundle.js'//输出文件
    6. 

  6.   }
    7. 

  7. }

3.在index.html中引入生成的boundle.js

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.  <meta charset="UTF-8">
    5. 

  5.  <title>Title</title>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8.  <app></app>
    9. 

  9.  <script src="boundle.js"></script>
    10. 

  10. </body>
    11. 

  11. </html>

4.安装环境

a.webpack安装配置

  1.     cnpm install webpack --save-dev  //不带服务器版本
    2. 

  2.     cnpm install webpack-dev-server --save-dev //带服务器版本

注意 两个都要安装

在package.json中配置开发命令

  1. "scripts":{
    2. 

  2.   "dev" : "webpack-dev-server --inline --hot --port 8082"
    3. 

  3. }

–inline:文件修改后则重启

–hot 模块热载

–port指定端口

b.将App.vue 变成正常代码

  1. cnpm install vue-loader@8.5.4 --save-dev
    2. 

  2. cnpm install vue-html-loader --save-dev
    3. 

  3. cnpm install css-loader --save-dev
    4. 

  4. cnpm install vue-style-loader --save-dev
    5. 

  5. cnpm install vue-hot-reload-api@1.3.2 --save-dev

vue-hot-reload-api 每次改完后验证代码有没有错误功能

在webpack.config.js中添加

  1. module:{
    2. 

  2.   loaders:[
    3. 

  3.     {test:/\.vue$/,loader:'vue'},//将.vue文件通过vue-loader变成正常代码
    4. 

  4.     {test:/\.js$/,loader:"babel",exclude:/node_modules/},//将除了node_modules文件夹下的.js文件通过babel转换成兼容代码
    5. 

  5.   ]
    6. 

  6. }

c.配置babel编译环境

安装babel相关程序

  1. cnpm install babel-loader --save-dev
    2. 

  2. cnpm install babel-core --save-dev
    3. 

  3. cnpm install babel-plugin-transform-runtime --save-dev
    4. 

  4. cnpm install babel-preset-es2015 --save-dev
    5. 

  5. cnpm install babel-runtime --save-dev

在webpack.config.js中添加

  1. //配置ES6编译环境
    2. 

  2. babel:{
    3. 

  3.   presets:['es2015'],
    4. 

  4.   plugins:['transform-runtime']//每次改完代码时时编译插件
    5. 

  5. }

d.安装Vue

  1. cnpm install vue@1.0.28 --save

5.在App.vue中添加代码

  1. <template>
    2. 

  2.     <h1>welcome Vue</h1>
    3. 

  3. </template>
    4. 

  4. <script>
    5. 

    6. 

  6. </script>
    7. 

  7. <style>
    8. 

  8.     body{
    9. 

  9.         background: #abc
    10. 

  10.     }
    11. 

  11. </style>

6.在入口文件main.js中添加代码

  1. import Vue from 'vue';
    2. 

  2. import App from './App.vue';
    3. 

    4. 

  4. new Vue({
    5. 

  5.     el:"body",
    6. 

  6.     components:{
    7. 

  7.         app:App
    8. 

  8.     }
    9. 

  9. });

7.配置项目规范约束和git忽略文件

.gitignore

.editorconfig

手动搭建Vue环境的更多相关文章

  1. WindowsServer2012 R2 64位中文标准版(IIS8.5)下手动搭建PHP环境详细图文教程(二)安装IIS8.5

    //来源:http://www.imaoye.com/Technology/WindowsServer2012R264IIS85.html 阿里云服务器ECS Windows Server 2012 ...

  2. 混合式app ionic2.x 手动搭建开发环境教程分享(nodejs,jdk,ant,androidsdk)

    1.ionic简介 为什么选用ionic: 彻底开源且免费 性能优异 基于红的发紫的AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃 ngCordova,将主 ...

  3. 初次搭建vue环境（最基础的）

    一直以来觉得搭建环境是自己的短板,恰巧老大跟我说他刚才面试一个有4年工作经验的人,给那面试的人出了到机试题,给了1小时的时间连环境都没搭好.且不说那人的工作经验是否掺有水分,自己还是有点尴尬的,以前的 ...

  4. 手动搭建Vue之前奏:搭建webpack项目

    手动搭建vue项目 搭建vue前首先搭建webpack项目 首先你应当安装一下npm以及nodejs 安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name ...

  5. 搭建Vue环境总是出错，就重新安装就好了

    总是报错,还不如重新安装.. 错误千奇百怪,解决了 这个错误又会出现另外一个. 百度了一个挺好用的e 在window下搭建Vue.Js开发环境   nodejs官网http://nodejs.cn/下 ...

  6. Linux手动搭建LAMP环境

    当你看到标题里的“手动搭建”,你是不是会想,难不成还有“自动搭建”?当然......不是,这里的“手动搭建”是指按部就班的搭建Apache.MySQL.PHP环境,是相对于集成软件包而言的.所以你是不 ...

  7. VUE-Windows系统下搭建vue环境

    一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:).注意记下路径..   此处默认安装这4项即可,点击Next按钮. ...

  8. Ionic 2 + 手动搭建开发环境教程 【转】

    ionic简介 为什么选用ionic: 彻底开源且免费 性能优异 基于红的发紫的AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃. ngCordova,将主流 ...

  9. 18.搭建 vue 环境

    第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...

随机推荐

  1. php本地及远程文件包含漏洞

    在php程序中包含有file inclusion的时候,php要开启一下两个功能: allow_url_fopen onallow_url_include on 但是开启这两个功能之后伴随的是url漏 ...

  2. iOS_线程和进程的区别与联系

    首先是线程和进程的联系: 线程和进程都是由操作系统所负责的程序运行的基本单元,系统利用该基本单元实现对应用的并发性. 接下来就是线程和进程的区别: 线程和进程最大的区别就是它们是操作系统的两种资源管理 ...

  3. widows下node.js环境搭建及运行js

    昨天刚刚开始学习node.js,网上一些教程不是很清楚,所以总结一下我的经验. 1.安装. 安装省略,就到官网上去下载安装一下就好.安装完成之后,打开cmd,输入"path",查看 ...

  4. （BFS）aoj0558-Cheese

    题目地址 根据题意,必须按从1吃到n的顺序.建立vi数组记录去没去过某一点,从起点向四周搜索,合法且未去过就入队列.每当找到符合此时应吃的位置,就将这个位置改为'.'并刷新vi数组,清空队列(因为必须 ...

  5. Const(常量)与readonly(只读)的区别

    const与readonly定义的值都不能更改,但它们到底有哪些异同点呢? Const ² Const是常量的意思,其定义的变量只能读取不能更改,且只能在定义时初始化,不能在构造函数与其它属性与方法中 ...

  6. matlab 使用札记

    1.inline 命令行内置函数,作用同Function一致 2.repmat B = repmat(A,m,n)B = repmat(A,[m n])B = repmat(A,[m n p...]) ...

  7. python常用的内置库

    标准库: import os os.getcwd()  //返回当前工作路径 os.chdir('/server/accesslogs')   # Change current working dir ...

  8. hibernate3 所需的jar包

  9. JDK安装与环境变量配置

    1.安装JDK 选择安装目录 安装过程中会出现两次 安装提示 .第一次是安装 jdk ,第二次是安装 jre .建议两个都安装在同一个java文件夹中的不同文件夹中.(不能都安装在java文件夹的根目 ...

  10. python获取指定时间段内的随机不重复的时间点

    上篇 <python时间时分秒与秒数的互相转换>http://www.cnblogs.com/gayhub/p/6154707.html 提到了把时间转成秒数的方法, 这篇写写转换成秒数后 ...