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/

  • 相关阅读:
    PAT A1094 The Largest Generation (25 分)——树的bfs遍历
    PAT A1055 The World's Richest (25 分)——排序
    PAT A1052 Linked List Sorting (25 分)——链表,排序
    PAT A1076 Forwards on Weibo (30 分)——图的bfs
    辅导员
    辅导员面试
    C程序设计
    Excel VBA 基本概念
    Excel函数
    导入excel表的数据到数据库ssh
  • 原文地址:https://www.cnblogs.com/BurtBlog/p/6522510.html
Copyright © 2011-2022 走看看