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文件

  • 相关阅读:
    牌库读取的修复
    法术迸发(Spellburst)
    传染孢子的探索
    降低电脑功耗——降低笔记本风扇噪音
    Playfield 类方法的注释
    大陆争霸( 最短路变形)
    POJ 2406 Power String
    括号匹配
    HDU 1003 最大子段和
    6.19noip模拟赛总结
  • 原文地址:https://www.cnblogs.com/wjs521/p/9959872.html
Copyright © 2011-2022 走看看