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. dll版本冲突的解决方法

    问题描述 当运行站点或者控制台等程序时,如果项目引用的dll版本与其它dll所依赖的dll版本不一致,就会报未能加载程序集的错误.错误信息为: 未能加载文件或程序集"Newtonsoft.J ...

  2. js正则表达式大全(3)

    正则表达式regular expression详述(一) 正则表达式是regular expression,看来英文比中文要好理解多了,就是检查表达式符 不符合规定!!正则表达式有一个功能十分强大而又 ...

  3. 手机客户端UI测试常见的测试点

    1．各种分辨率下,显示正常.现市场上主流的塞班V3系统手机为240*320.320*240.WM系统主要为240*320.320*480.Android系统主要为320*480,Iphone系统为32 ...

  4. bcd-ascii相互转换函数

    // BCD转ASCII int Asc2Bcd(unsigned char *input, unsigned int inputLen, unsigned char *output) { unsig ...

  5. oracle基础学习

    一.创建数据库用户 create user myaccount identified by mypassword;(my+account表示 账号,my+password表示 密码) 二.授予用户权限 ...

  6. linux下编译出现空间不足解决办法

    linux下编译出现空间不足解决办法 编译内核出现问题: AS      .tmp_kallsyms1.o .tmp_kallsyms1.S:2: fatal error: when writing ...

  7. 误设PATH导致命令失效的处理

    今天配置Linux下的Java环境时,把PATH设为了export PATH=${JAVA_HOME}/bin,然后执行了source ~/.bash_profile命令,导致了几乎所有的Linux命 ...

  8. Codeforces Round #284 (Div. 2) C题（计算几何）解题报告

    题目地址 简要题意: 给出两个点的坐标,以及一些一般直线方程Ax+B+C=0的A.B.C,这些直线作为街道,求从一点走到另一点需要跨越的街道数.(两点都不在街道上) 思路分析: 从一点到另一点必须要跨 ...

  9. 用JQuery Validate框架，在IE8下验证报错问题解决

    网站后台用了JQuery Validate框架,版本是jQuery Validation Plugin 1.8.1 因为用的时间比较久了,一直没有更新新版本. 最近公司信息录入员有调整,没有IE11浏 ...

  10. DotSpatial 删除图层要素

    //添加图层后,定义图层,并获取图层 //遍历要素,并进行删除 FeatureSet fs = null; fs = (FeatureSet) map1.Layers[0].DataSet; //要素 ...