node搭环境(四)--webpack启服务运行VUE模块文件(手写简单脚手架)
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模块文件(手写简单脚手架)的更多相关文章
- node搭环境
node是javascript的运行环境,npm是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等). 一.安装node 1.在https://nodejs.org/en/do ...
- 如何让 node 运行 es6 模块文件,及其原理
如何让 node 运行 es6 模块文件,及其原理 最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机 ...
- 不使用Tomcat,手写简单的web服务
背景: 公司使用的YDB提供了http的查询数据库服务,直接通过url传入sql语句查询数据-_-||.ydb的使用参照:https://www.cnblogs.com/hd-zg/p/7115112 ...
- node搭环境(二)之 bower gulp
前面详细记录了安装node及git,接来下要安装bower,首先创建一个空文件夹bowerandgulp. 步骤:1.安装node.js 2.node里面自带了 npm 3.通过npm 安装cnpm ...
- node搭环境(三)之安装vue-devtools
前面已经安装了bower gulp,马上要学vue了,今天安装vue及调试神器vue-devtools 安装步骤: 1.在GitHub上输入 github.com/vuejs/vue-devtool后 ...
- 使用node-static运行vue打包文件dist
vue打包后的文件dist,如果想上线之前查看效果,方法如下: npm install -g node-static 进入到dist文件夹,运行static命令 打开上面地址
- 程序员PS技能(四):程序员创建PSD文件、展示简单PSD设计流程,上传PSD至蓝湖,并下载Demo切图
前言 本篇是程序员仿照ui设计创建psd且切图五个按钮效果上传至蓝湖,本篇篇幅较长,整体完成一个目标,没有分篇幅了. 前提条件 已经安装了PS,已经在PS上安装了蓝湖插件,并且曾经已经上传 ...
- 试着用React写项目-利用Webpack搭环境
转载请注明出处:王亟亟的大牛之路 最近都蛋疼,然后前些天开了个会就是关于"不加班就得死"的死命令,作为抵制加班的先头兵,我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了,就 ...
- centos 6.x 安装配置 node.js 环境
下载 可以在本地下载node.js最新版,然后通过ftp工具上传到服务器,或者直接在服务器终端使用wget命令下载(我当时下载的是node-v6.11.3-linux-x64版本,其他版本请查看上面链 ...
随机推荐
- addEntriesFromDictionary用法
1.addEntriesFromDictionary在字典中的用法: NSMutableDictionary *dic1 = [NSMutableDictionary dictionaryWithOb ...
- npm 还是 yarn ?
技术选型时这个问题总是困扰我,今天看到一篇文章,详细的解释了 npm 和 yarn 在性能,安全,支持性和使用难易度上的区别,看完之后这个问题终于有一个答案: 如果你在意速度和 UI,选 yarn,如 ...
- weekly contest 115
958. Check Completeness of a Binary Tree Given a binary tree, determine if it is a complete binary t ...
- 用python面向对象的方法实现欧拉算法和龙格库塔算法
#!/bin/python3 # -*-coding:utf-8 -*- import math import numpy as np #定义一个欧拉算法的类,从而实现不同步长的引用 class Eu ...
- js中的DOM对象 和 jQuery对象 比较
一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...
- 再谈hive-1.0.0与hive-1.2.1到JDBC编程忽略细节问题
不多说,直接上干货,这个问题一直迷惑已久,今天得到亲身醒悟. 所以,建议hadoop-2.6.0.tar.gz的用户与hive-1.0.0搭配使用.当然,也可以去用高版本去覆盖它. log4j:WAR ...
- Eclipse报错:Attribute "xmlns" was already specified for element "web-app".
原因: 在Eclipse中修改了已有的Web工程的工程名,然后出现该错误. Attribute "xmlns" was already specified for element ...
- springdataRedis连接redis集群
配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...
- pytorch tensor与numpy转换
从官网拷贝过来的,就是做个学习记录.版本 0.4 tensor to numpy a = torch.ones(5) print(a) 输出 tensor([1., 1., 1., 1., 1.]) ...
- AngularJs ng-repeat解决循环对象出现重复项报错的问题
问题:ng-repeat 的循环对象是不能出现重复项的,所以如果有重复的就会报错,应该是 key value的问题吧,不是很了解内部运行机制:经过查询发现 在 循环后面加上 track by $i ...