zoukankan      html  css  js  c++  java
  • npm、webpack、vue-cli快速上手版

    node.js和npm

    npm的安装和更新

    Node.js下载安装,npm自带的包管理工具。

    查看安装版本信息:

      node -v 查看node.js版本信息

      npm -v 查看npm版本信息

    更新npm到指定版本:

      npm install npm@5.3.0 -g  (install可以简写为i,-g是安装为全局模式下)

      npm i npm@latest -g 更新最新的稳定版本

    npm 常用操作

    进入项目目录下,进行一下的命令:

      npm init -y 输入-y使用默认配置项,生成package.json文件。管理目前所在的文件目录

      npm i jQuery@0.0.0 简写install为i 下载依赖 不写@默认最新版本

      npm uninstall jQuery 卸载依赖包

      npm update jQuery 更新依赖包

      npm list 列出已安装的依赖

      npm i webpack --D 保存为开发环境依赖

      老版本需要--save参数

    我们的项目目录下会生成一个node_modules目录,我们用npm下的包会在这个目录下。

    我们所有的依赖信息在package.json文件中,包括我们所有的依赖以及版本。

    如果我们删掉node_modules目录,可以使用npm i 来下载所有依赖。

    npm 常用配置项

    当我们用npm init 的时候用了参数-y,如果不用-y我们可以进行一些配置。

    在我们的package.json文件中有很多配置项。

      name 项目名字中间不能有空格只能用小写

      version 项目版本

      description 项目描述信息

      main 项目的入口文件

      scripts 指定命令的快捷方式npm run test    test是scripts里的键名   值为具体命令

    webpack4

    webpack的新特性

    1,webpack不在单独使用,需要webpack-cli

      全局安装 npm i webpack webpack-cli -g

      局部安装 npm i webpack webpack-cli -D

    2,增加了模式区分(development,production)

      webpack --mode development/production 进行模式切换

      development开发者模式 打包默认不压缩代码

      production 生产者模式上线时使用,压缩代码。默认是这个模式

    3,固定入口目录为src,与入口默认文件index.js,出口文件在新增的dist目录下main.js

      当只有一个入口文件也就是src/index.js时,无需增加webpack.config.js

    vue-cli

    vue-cli是官方提供的快速构建这个单页面应用的脚手架。

    根据官方文档中的构件流程:

      前提是已经安装了node.js否则npm都用不了

      1,使用npm全局安装vue-cli

        npm i -g vue-cli

      2,安装完成后在自己的工作空间里

        vue init webpack wjs   (这里的wjs是创建的项目名称)

      3,切换到我们的项目目录下

        cd wjs

        npm run dev

    目录结构:

      build里面是一些操作文件,使用npm run * 时其实执行的就是这里的文件

      config配置文件,执行文件需要的配置信息

      src资源文件,所有的组件以及所有的图片都在这个文件夹下

      node_modules 项目依赖包

      static 静态资源

      package.json  依赖包的json文件

  • 相关阅读:
    LeetCode 24. Swap Nodes in Pairs (两两交换链表中的节点)
    LeetCode 1041. Robot Bounded In Circle (困于环中的机器人)
    LeetCode 1037. Valid Boomerang (有效的回旋镖)
    LeetCode 1108. Defanging an IP Address (IP 地址无效化)
    LeetCode 704. Binary Search (二分查找)
    LeetCode 744. Find Smallest Letter Greater Than Target (寻找比目标字母大的最小字母)
    LeetCode 852. Peak Index in a Mountain Array (山脉数组的峰顶索引)
    LeetCode 817. Linked List Components (链表组件)
    LeetCode 1019. Next Greater Node In Linked List (链表中的下一个更大节点)
    29. Divide Two Integers
  • 原文地址:https://www.cnblogs.com/wjs521/p/9959872.html
Copyright © 2011-2022 走看看