主流框架的搭建(VUE,React)
vue脚手架:
cnpm install vue vue-cli -g
vue init webpack/webpack-simple shuaige(新建文件夹的名字)
cd shuaige
cnpm install
npm run dev
打包npm run build
react脚手架:
cnpm install create-react-app -g
create-react-app shuaige(新建文件夹名字)
cd shuaige
cnpm install
运行是npm start
打包npm run build
cnpm install serve -g
serve -s build
/*开发模式devD,你开发是用的*/
有关webpack自己配置的问题:
1.npm init (生成pack.json);
2.cnpm install webpack-cli -g(webpack -v【当时我用的是4.X】);
3.cnpm install webpack -D;
4.cnpm install webpack-cli -D;
5.entry(入口文件),output(出口文件),plugins:{},有关title的问题(<%=htmlWebpackPlugin%>),pack.json("build":"webpack --mode development");
6.clean-webpack-plugin:删除某些东西
7.服务器环境【webpack-dev-server】("dev":"webpack-dev-server --mode development")
8.loaders:加载器,转化器less/scss,ES[style-loader,css-loader],use:[{loader:'style-loader'},{loader:'css-loader'}],压缩,--mode production
9.cnpm install file-loader url-loader -D
10.extract-text-webpack-plugin[分离css],
11.遇见替代,版本太低(extract-text-webpack-plugin@next)
遇见路径问题publicPath:'../'[vue项目上线时,哪里见过]
outputPath:'images'[打包出去的路径]
new extractTextPlugin(提取出去的路径css/index.css)
mini-css-extract-plugin:(2018/3.23支持不好)
*********less*******
cnpm install less less-loader -D
*****sass****
postCss 预处理器(自动添加浏览器前缀)
主流框架的搭建(VUE,React)的更多相关文章
- 前端三大框架(Angular Vue React)
前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...
- 2015前端各大框架比较(angular,vue,react,ant)
前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...
- 前端三大主流框架的对比React、Vue、Angular
前端三大主流框架的对比React.Vue.Angular React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源.React 拥有较高的 ...
- angular vue react web前端三大主流框架的对比
首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...
- 三种Web前端框架比较与介绍--Vue, react, angular
一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- 搭建App主流框架_纯代码搭建(OC)
转载自:http://my.oschina.net/hejunbinlan/blog/529778?fromerr=EmSuX7PR 搭建主流框架界面 源码地址在文章末尾 达成效果 效果图 注:本文部 ...
- Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择
转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...
- 10分钟搭建 App 主流框架
搭建主流框架界面 0.达成效果 我们玩iPhone应用的时候,有没发现大部分的应用都是上图差不多的结构,下面的TabBar控制器可以切换子控制器,上面又有Navigation导航条 我们本文主要是搭建 ...
随机推荐
- Python 读取 支付宝账单并存储到 Access 中
我有一个很多年前自己写的C#+Access的记账程序,用了很多年,现在花钱的机会多了,并且大部分走的支付宝,于是就想把账单从支付宝网站上下载下来,直接写入到Access,这样就很省心了. 记账程序是长 ...
- JAVA使用Logback发送日志到控制台、文件、ELK的最简单用法
一.简述 本文讲JAVA使用Logback发送日志到控制台.文件.ELK的最简单用法. 二.教程 1.新建pom.xml项目引入下列依赖: <dependencies> <!--Be ...
- Node.js模板引擎的深入探讨
每次当我想用 node.js 来写一个 web 相关项目的时候.我总是会陷入无比的纠结.原因是 JavaScript 生态圈里的模板引擎实在太多了,但那么多却实在找不出一个接近完美的,所谓完美的概念就 ...
- 找回停掉docker的文件
如果容器还能重启,就restart, 如果状态是DEAD的话, Error response from daemon: Container is marked for removal and cann ...
- reStructuredText语法简单说明
reStructuredText 是扩展名为.rst的纯文本文件,含义为"重新构建的文本"",也被简称为:RST或reST. 官方网址: http://docutils. ...
- IDEA使用笔记(十一)——好玩的类图结构
今天使用 IntelliJ IDEA 发现一个好玩的操作,尤其对于研究源码了解类的层级关系有非常大的帮助! 1:先看效果 1-1:HashSet的类图结构——继承什么类.实现什么接口一目了然 1-2: ...
- Python之关于工具包简介
1.Pandas Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.Pandas 纳入了大量库和一些标准的 ...
- 蜻蜓特派员 Windows XP SP3 纯净终结版
蜻蜓特派员Windows XP SP3 纯净安装版 终结版,系统纯净无广告.无插件,网卡等驱动和运行库齐全,安全更新补丁全网最新!微软停止了 Windows XP 的支持之后还是偶尔为 WinXP 提 ...
- 什么是SPU、SKU、ARPU
这是一篇存档性笔记,我自己存档一下对这3个词的理解.如果你已经明了了这3个词的意思,请直接忽略之 首先,搞清楚商品与单品的区别.例如,iphone是一个单品,但是在淘宝上当很多商家同时出售这个产品的时 ...
- 【gulp】gulp-file-include 合并 html 文件
gulp-file-include 是 gulp 插件,它提供了一个 include 方法让我们可以像后端模板那样把公共部分的页面导入进来. 安装依赖包(包括了 gulp-file-include 和 ...