1:webstorm的安装:2:node.js的安装3:安装Git4:vue-cli 安装前面两步就可以把项目启动了,安装Git主要是打开命令窗口,这样就可以用liunx命令了,原理跟cmd差不多 Vue.js是一套构建用户界面的 “渐进式框架”.      Vue 采用自底向上增量开发的设计.      Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下V

有时候我们会创建一些小项目,只有几个简单html,没有引入一些前端框架,也没有使用webpack,那我们要如何让代码在我们本地跑起来呢? 当然是有很多种方法,IIS.wampserver等等好多都可以用,这里只是说道纯粹用node就把项目跑起来,配置简单. 前提是你要安装好了nodejs,安装方法,去百度一下大把. 现在假设你的文件目录如下 index templates index.html static js index.js css index.css 现在需要在index同级目录新建两个

1.首先点击WebStorm右上方的下拉箭头弹出的Edit Configurations…. 2.然后会进入一个配置页面.点击左上方的+.在弹出的列表中选中npm. 3.在右边的配置框中,先选择Command为help.接着点击下方的+号.再点击Run External tool 4.在弹出框中选择+号. 5.在弹出的配置框中,填写相应信息. Program为react Native的路径,终端命令:which react-native  一般都是   /usr/local/bin/react-

最近想使用WebStorm来写pomelo,初次使用WebStorm,网上找了老半天根本没有介绍WebStorm如何创建或者打开运行pomelo的教程,网易pomelo官网介绍的使用 WebStorm IDE 调试 Pomelo 应用程序,对于没有WebStorm使用经验的我来说,那叫蛋疼,经过不断摸索,最终总算弄出来了,写给新手们看看. 1.安装WebStorm 6.0 (1)windows下就不用多说了,下载地址:http://www.jetbrains.com/webstorm/,下载一个

我在运行renren-fast-vue前端项目时,安装完依赖cnpm install 启动服务npm run dev 出现问题. Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (67) 我以为是我安装Node太高了(升了下级node-v13.9.0),我尝试卸载重新安装Node(v11.9.0)

前提条件:已经安装nodejs和cnpm ,参考前一篇文章 1.在前端项目所在的目录下执行cnpm install 下载该项目需要的包,这些包和全局配置下的包可能不同的版本cnpm会根据package.json来下载 根据package-lock来锁定具体版本号 2.执行  cnpm run dev  来运行项目(不能使用npm run dev 会出现很多问题) 关注问题点: 1.向目包运行过程中cnpm install 可能需要重复执行,直到所有的包都完成了安装. 2.部分编译的时候报错出现找

vsCode为一个前端项目配置ts的运行环境,ts文件保存的时候自动编译成js文件: 假设此前端项目名称为Web:文件结构如图 1. 在根目录中新建一个“.vscode”文件夹,里面建一个“tasks.json”文件,内容为: { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0

前端项目, 每次运行都需要输入 sudo 的解决方法 node一直提示的sudo问题根本原因为: node 的所有者, 项目的所有者, 不同; 解决方法为: 将项目的所有者更改为 chown -R `whoami`:xxx ${project_dir} 查看node /usr/local/bin 下的node的权限 node 然后执行权限为 771. 通过实际测试发现, 更改项目的所有者与 node 相符, 其实就可以了. 一般的情况是因为将 项目中的某些文件的所有者权限更改了.

vue安装及配置 首先下载node.js要求版本在8.9以上        官网:https://nodejs.org/zh-cn/ 下载完可检查在windows任务命令行里输入node -v 使用淘宝NPM镜像源下载比较快    命令:npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli(全局安装vue-cli)    命令:cnpm install vue-cli -g 检查环境是否安装上:vue -

Webstorm+Chrome 调试Vue项目 前言 在项目开发中,Debug模式是非常有必要的,后端对于IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果启用Debug模式是需要单独去配置一些东西, 所以这里整理自己搭建成功的过程分享出来.可能不同的Webstorm版本会导致效果不一样,所以这里先列出我的版本. Webstorm版本: 2018.3.4 一.新建Vue项目 为了演示一个完整的示例,所以从创建项目开始,这里通过 vue脚手架命令 开始创建一个项目 vue in

前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处 易于学习使用 通过最少的API(核心.src().

前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务端同学那里修改代码,维护成本高,卖力不讨好＝＝ 工作了这么久,深深的感受到了那句名言的魅力,时间就是金钱呀!后来我发现,现在的web开发,谁还用这种低级的方法,大家都已经开始搞前后端分离了! 前后端分离的目的和作用 要弄清前后端分离的目的和作用,首先要知道什么是前后端分离. 现在的web前端越来越偏

什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行效率低,学习成本高的问题.所以最近几年对于前端构建工具--grunt就应运而生. Grunt能做什么呢? 按任务目标大致可分为四类:   1. 文件操作型:比如合并.压缩js和css文件等(包括). 2. 预编译型:比如编译less.sass.coffeescript等. 3. 类库项目构建型:比如

今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodejs.org/dist/v4.4.7/node-v4.4.7.tar.gz $ ./configure --prefix=/usr/local/nodejs $ make && sudo make install 装好后,npm 已经在/usr/local/nodejs/bin/npm. 如果之

在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框架是angular,所以在这里主要说Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架. 什么是Yeoman? Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTM

随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目,网上的相关教程也比较多:相对来说使用gulp来构建es6项目的中文教程就比较少. 经过一段时间的摸索,我觉得其实使用gulp也可以很方便地构建es6项目.以下是我感觉gulp和webpack主要的不同之处: gulp的任务机制和流式管道函数和webpack的

vscode 可安装静态web服务器  Live Server用于运行前端代码,方便调试.最新的 Live Server已支持php动态页面. 安装方法是,点击左侧第五个图标,打开"扩展"页面,在文本框中输入Live Server,点击第一个搜索结果,在右侧页面中点击安装,等待安装完成. 运行方式是,选中项目,点击屏幕下方工具栏中的Go live按钮即可.再点击一次,即停止运行服务器. Live Server有一些默认配置选项,用户可以修改.点击 文件->首选项->设置,

利用angular-cli的常见命令: npm i --save 包名   ->  软件依赖    npm i --save-dev 包名     ->  开发依赖    ng new 项目名  ->  创建新项目    ng build -prod  ->  生产环境编译    ng serve  ->  启动开发服务器    ng new 项目名 --skip-install  -> 不进行模块安装  ng new 项目名 -si    ng new 项目名 -si

npm build 打包前端项目实际上是执行 node build/build.js,但是随着项目的依赖包越来越多,项目打包时间不断延长,为了改善这个问题,需要从node入手 暂时解决方案:扩大node运行程序的内存,经本人测试(项目和机器固定) 2G:308.11s 4G:284.96s 6G:280.94s 8G:277.63s 10G:277.86s 因此看出设定为8G差不多,因为再往后效果已经不明显了 设定方法: 在package.json文件中将命令修改,也可以在执行命令的时候添加,

前面的话 后端的nodeJS项目可以使用pm2进行自动部署,由于前端项目打包后是静态资源,不需要进程守护.一般地,前端项目使用jenkins来进行自动部署,包括打包.测试等一系列流程.本文将详细介绍jenkins的使用 安装 Jenkins 是一款业界流行的开源持续集成工具,广泛用于项目开发,具有自动化构建.测试和部署等功能.由于 jenkins是基于java环境运行的,所以首先需要安装java环境 1.安装依赖包,使得add-apt-repository命令可以进行 apt-get insta

现象描述 昨天用webpack打包Vue的项目时,node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory.并且打包速度相当慢,估计项目过大了. 解决方案一:通过 package.json 中的 "build" 加大内存 /* package.json 文件 */"scripts": { "de