zoukankan      html  css  js  c++  java
  • windows平台web前端环境搭建

    背景

      随着不同终端(Pad、Mobile、PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本。为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务、数据接口,前端负责展现、交互逻辑,同一份数据接口,我们可以定制开发多个版本。

    环境搭建

      nodejs安装

        1、下载:https://nodejs.org/en/download/  (windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径。)

        2、安装完成后使用cmd测试下是否安装成功,方法:在cmd下输入node -v。

        3、新版的Node已经集成npm,在安装node时npm也一并安装,验证方法:npm -v。

      webpack安装

        1、npm install webpack -g(-g 表示全局安装)

        2、验证方法:webpack -v

      sass安装

        1、sass依赖于ruby环境,ruby下载地址:http://rubyinstaller.org/downloads

        2、在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量。

        3、安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby。

        4、直接在命令行中输入:gem install sass;更新已安装的sass:gem update sass;验证sass安装:sass -v

      vue安装

        1、vue-cli安装命令:npm install -g vue-cli

      git安装

        1、git下载地址:https://git-scm.com/downloads

      webstorm安装

        1、软件下载地址:http://www.jetbrains.com/webstorm/download/#section=windows-version

        2、配置sass编译:打开配置(Tools - File Watchers)就可以见到了,点击“+”号就可以新建监听配置了。在新建一个 sass、scss、less 文件之后,webstorm 会智能的提示你新建一个 watcher 任务。

        3、配置webpack打包

    参考链接

      1、sass:https://www.w3cplus.com/sassguide/install.html

      2、webpack:http://www.ferecord.com/webpack-summary.html

      3、前后端分离:http://frontenddev.org/link/full-stack-development-with-nodejs-1.html

      4、git:http://jingyan.baidu.com/article/020278117cbe921bcc9ce51c.html

      5、webstorm:http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%81/

  • 相关阅读:
    MySQL 中now()时间戳用法
    ajax local.href不跳转的原因之一
    Call to a member function select() on string错误
    TP框架中ajax post请求时提示404
    TP框架中field查询字段
    jQuery如何获得select选中的值?input单选radio选中的值
    TP框架中session操作
    InnerHtml() 与html( )的区别
    C++开源项目等收集
    RCU-数据库初始化参数
  • 原文地址:https://www.cnblogs.com/BurtBlog/p/6522510.html
Copyright © 2011-2022 走看看