手动搭建Vue环境

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配置文件
    7.

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. }
    8.

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>
    12.

4.安装环境

a.webpack安装配置

    

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

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

注意 两个都要安装

在package.json中配置开发命令

    

  1. "scripts":{
    2. 

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

  3. }
    4.

–inline:文件修改后则重启

–hot 模块热载

–port指定端口

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

    

  1. cnpm install vue-[email protected].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-[email protected].3.2 --save-dev
    6.

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. }
    7.

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
    6.

在webpack.config.js中添加

    

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

  2. babel:{
    3. 

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

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

  5. }
    6.

d.安装Vue

    

  1. cnpm install [email protected].0.28 --save
    2.

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>
    12.

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. });
    10.

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

.gitignore

.editorconfig

来自为知笔记(Wiz)

时间： 2024-10-11 03:23:14

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

Linux手动搭建LAMP环境

当你看到标题里的“手动搭建”,你是不是会想,难不成还有“自动搭建”?当然......不是,这里的“手动搭建”是指按部就班的搭建Apache.MySQL.PHP环境,是相对于集成软件包而言的.所以你是不是能够猜到,我后续还会整理一篇通过集成软件包搭建LAMP环境的文章呢? 其实关于LAMP环境,我到现在都没有用过,好多东西也都不懂为什么要这么做,当初只是心血来潮,想自己搭建一个wiki,所以才着手研究的.我不是搞PHP的,也不是搞后端的,额......是不是暴露的太多了,仅仅是为了搭建环境而搭建环

Arcgis Android 手动搭建开发环境

前言 本文为大家分享arcgis android 环境的手动搭建过程,默认你懂一定的java和android 基础知识,已经有android的开发环境.如缺乏以上环境和知识,请自行补充. 版本介绍 Arcgis android从2.0版本到现在(2015-08-31)最新的10.2.6版本,中间有多个小版本,简要说下.10系列是较新的系列,2.0系列是老古董了.其中,10.2.4开始支持shapefile和一些栅格数据了,详细请参考这里.如果没记错的话,在10.2.2系列开始,graphicla

18.搭建 vue 环境

第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nodejs.org/en/ 或者 http://nodejs.cn/ 第二步 node环境检测 为了快乐的使用命令行,我们推荐使用 gitbas1.1 下载git 并安装下载地址 https://git-for-windows.githu...安装成功后 右键菜单 我们可以看到 Gti Bash Her

手动搭建php环境

php手动搭建环境有好多种组合,版本号不一致,会导致搭建失败. 我搭建的组合是: php5.6+MySQL5.6+Apache2.4的组合. 一.PHP语言包下载 首先从官网上下载php5.6 http://windows.php.net/download#php-5.6 选择完整版下载: 二. Apache服务器下载 首先从官网上下载Apache2.4  http://httpd.apache.org/download.cgi 进入第二个界面,选择第二个选项: 根据电脑的不同,选择相应的位数:

搭建vue环境

1.安装node.js 进入官网 :https://nodejs.org/en/ 选择适合自己的版本下载,可以一直选择下一步进行安装. 2.验证node是否安装成功 安装完成之后,在桌面打开终端 (win键+r键输入"cmd"即可打开),在终端输入"node -v" 会出现你所安装的对应版本就是安装成功  3.安装cnpm 由于npm是国外的,使用起来很慢,所以用淘宝镜像cnpm代替npm,功能完全一样 终端里面输入 npm install -g cnpm --re

在windows下用脚手架搭建vue环境

做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架 3.命令为:cnpm install -g vue-cli,回车,等待安装 安装完后,可以输入vue,然后回车,如果出现vue的信息,则说明安装成功了. 4.紧接着,就该创建项目了,自己找一个合适的地方,新建一个项目文件夹,根据自己的需要

57.搭建Vue环境

nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3 cmd命令行: node -v //显示node版本 v6.10.3 npm -v  //显示npm包管理器版本 3.10.10 由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm Cmd命令行中输入npm install -g cnpm --registry=http://re

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

1.ionic简介 为什么选用ionic: 彻底开源且免费 性能优异 基于红的发紫的AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃 ngCordova,将主流的Cordova API或者Cordova插件封装为AngularJS扩展,使用非常方便 开源免费的webfont icon库ionicons,基本满足你icon需求 2.相关下载: Node.js(npm安装工具) :  https://nodejs.org/en/ jdk (android编译

[补充资料] 手动搭建 Cloudera 环境

本课主题 集群搭建 Cloudera 服务器搭建 集群搭建 查看你主机的 IP 地址并且设置静态 IP,这里显示的是 192.168.80.145 ifconfig -a 用图型界面来设置静态 IP 修改 network 文件来修改 HOSTNAME  vim /etc/sysconfig/network hostname elephant service network restart 修改 /etc/hosts 文件 192.168.80.145 elephant 192.168.80.14