webpack启服务步骤:

1、新建空文件夹webpack-vue。在空文件夹右键点击- GIt Bath here--输入cnpm init--按程序走完会生成package.json文件

2、打开package.json文件,先把main和scripts对应内容修改

3、在package.json 安装相关模板(生产模块/开发模块/服务命令).

输入cnpm install vue --save 安装开发环境

package.json里面便会对应的出现vue文件

输入cnpm i -D webpack webpack-dev-server

输入 cnpm i -D vue-loader vue-html-loader vue-style-loader vue-template-compiler

输入 cnpm i -D css-loader file-loader style-loader

输入 cnpm i -D babel-loader babel-core babel-preset-env

输入cnpm i -D babel-preset-env 会根据配置的运行环境自动启动需要的babel插件

以上安装的插件如下,也可直接复制。

4、配置webpack  创建webpack.config.js

5、编写main.js

//main.js是入口文件, webpack编译会通过根目录文件打包到build.js

6、APP.vue

7、User.vue

8、编写babelrc

9、index.html引用build.js

//此时webpack将js/vue 打包到build.js,先执行Npm install

10、运行测试 npm run dev

node搭环境(四)--webpack启服务运行VUE模块文件(手写简单脚手架)的更多相关文章

  1. node搭环境

    node是javascript的运行环境,npm是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等). 一.安装node 1.在https://nodejs.org/en/do ...

  2. 如何让 node 运行 es6 模块文件,及其原理

    如何让 node 运行 es6 模块文件,及其原理 最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机 ...

  3. 不使用Tomcat,手写简单的web服务

    背景: 公司使用的YDB提供了http的查询数据库服务,直接通过url传入sql语句查询数据-_-||.ydb的使用参照:https://www.cnblogs.com/hd-zg/p/7115112 ...

  4. node搭环境(二)之 bower gulp

    前面详细记录了安装node及git,接来下要安装bower,首先创建一个空文件夹bowerandgulp. 步骤:1.安装node.js 2.node里面自带了 npm  3.通过npm 安装cnpm ...

  5. node搭环境(三)之安装vue-devtools

    前面已经安装了bower gulp,马上要学vue了,今天安装vue及调试神器vue-devtools 安装步骤: 1.在GitHub上输入 github.com/vuejs/vue-devtool后 ...

  6. 使用node-static运行vue打包文件dist

    vue打包后的文件dist,如果想上线之前查看效果,方法如下: npm install -g node-static 进入到dist文件夹,运行static命令 打开上面地址

  7. 程序员PS技能(四):程序员创建PSD文件、展示简单PSD设计流程,上传PSD至蓝湖,并下载Demo切图

    前言   本篇是程序员仿照ui设计创建psd且切图五个按钮效果上传至蓝湖,本篇篇幅较长,整体完成一个目标,没有分篇幅了.   前提条件   已经安装了PS,已经在PS上安装了蓝湖插件,并且曾经已经上传 ...

  8. 试着用React写项目-利用Webpack搭环境

    转载请注明出处:王亟亟的大牛之路 最近都蛋疼,然后前些天开了个会就是关于"不加班就得死"的死命令,作为抵制加班的先头兵,我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了,就 ...

  9. centos 6.x 安装配置 node.js 环境

    下载 可以在本地下载node.js最新版,然后通过ftp工具上传到服务器,或者直接在服务器终端使用wget命令下载(我当时下载的是node-v6.11.3-linux-x64版本,其他版本请查看上面链 ...

随机推荐

  1. addEntriesFromDictionary用法

    1.addEntriesFromDictionary在字典中的用法: NSMutableDictionary *dic1 = [NSMutableDictionary dictionaryWithOb ...

  2. npm 还是 yarn ?

    技术选型时这个问题总是困扰我,今天看到一篇文章,详细的解释了 npm 和 yarn 在性能,安全,支持性和使用难易度上的区别,看完之后这个问题终于有一个答案: 如果你在意速度和 UI,选 yarn,如 ...

  3. weekly contest 115

    958. Check Completeness of a Binary Tree Given a binary tree, determine if it is a complete binary t ...

  4. 用python面向对象的方法实现欧拉算法和龙格库塔算法

    #!/bin/python3 # -*-coding:utf-8 -*- import math import numpy as np #定义一个欧拉算法的类,从而实现不同步长的引用 class Eu ...

  5. js中的DOM对象 和 jQuery对象 比较

    一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...

  6. 再谈hive-1.0.0与hive-1.2.1到JDBC编程忽略细节问题

    不多说,直接上干货,这个问题一直迷惑已久,今天得到亲身醒悟. 所以,建议hadoop-2.6.0.tar.gz的用户与hive-1.0.0搭配使用.当然,也可以去用高版本去覆盖它. log4j:WAR ...

  7. Eclipse报错:Attribute "xmlns" was already specified for element "web-app".

    原因: 在Eclipse中修改了已有的Web工程的工程名,然后出现该错误. Attribute "xmlns" was already specified for element ...

  8. springdataRedis连接redis集群

    配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...

  9. pytorch tensor与numpy转换

    从官网拷贝过来的,就是做个学习记录.版本 0.4 tensor to numpy a = torch.ones(5) print(a) 输出 tensor([1., 1., 1., 1., 1.]) ...

  10. AngularJs ng-repeat解决循环对象出现重复项报错的问题

    问题:ng-repeat  的循环对象是不能出现重复项的,所以如果有重复的就会报错,应该是 key value的问题吧,不是很了解内部运行机制:经过查询发现 在 循环后面加上  track by $i ...