终端操作各插件安装配置

安装：less

npm install less --save 非全局安装 -g  全局
npm install less-loader --save

终端的操作命令：

sudo npm uninstall npm -g 卸载  node

sudo npm uninstall vue-cli -g 卸载 vue-cli

npm 安装指定版本（按版本安装）

npm install jquery@3.0.0 --save

在package.json中可以看到：

"jquery": "^3.0.0"

1、全局安装

npm install xxx -g  //模块将被下载安装到【全局目录】中

2、本地安装

npm install xxx //则是将模块下载到当前命令行所在目录

3、信息写入

npm install xxx --save
npm install xxx --save-dev  
//安装的同时，将信息写入package.json中项目路径中

--save 将依赖包名称添加到 package.json 文件 dependencies 键下
--save-dev 则添加到 package.json 文件 devDependencies 键下

--save 是你发布之后还依赖的东西
--save-dev 是你开发时候依赖的东西

注解：比如，你写 ES6 代码，如果你想编译成 ES5 发布那么 babel 就是devDependencies。
如果你用了 jQuery，由于发布之后还是依赖jQuery，所以是dependencies。

npm install --save vue-awesome-swiper 轮播插件

window系统 win+r 输入cmd打开终端

ls 查看当前目录下的文件

pwd查看当前所在路径

cd / 根目录

npm run dev & 后台运行加&符号后台运行

ps aux | grep dev 查询已运行的带有dev 的程序

ps aux | grep dev |grep vue 查询已打开的vue程序

kill -9 14857 杀死进程id为 14857的程序

ctrl +l 清屏

ctrl +c 结束程序

输入点tab 自动补全

mkdir + 文件夹名创建文件夹

node -v 查询是否安装node.js

npm -v 查看npm版本

npm install vuex --save 安装vuex ，-g全局引用 --save 保存到了 package.json 中的dependencies 中

npm install vuex --save-dev 安装vuex 保存到了package.json 中的devDependencies 中

npm install normalize.css -g--save 安装css初始化插件

npm uninstall vuex [-g][--save-dev] 卸载vuex

# 安装 nodejs

安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node，我这里的npm版本为3.10.10。如果该命令不可以使用，需要安装node软件包，根据你的系统版本选择下载安装就可以了。

下载地址：http://nodejs.cn/download/

以下介绍的是命令行安装方法，读者也可以到nodejs官网上下载安装。

sudo apt-get install nodejs-legacy
sudo apt-get instatll npm

升级npm为最新版本

sudo npm install npm@latest -g

npm install -g webpack 全局安装webpack

sudo npm install -g webpack 上面命令安不上可以以管理员身份安装

webpack -v 检查是否安装

安装vue-cli 安装命令：npm install vue-cli -g 查看版本号 vue -V

初始化项目 vue init webpack Resume

npm install 安装npm包管理器

npm run dev 开发模式下运行我们的程序。

在命令行中用npm run build 进行打包。

npm install vuex --save 安装集中式状态管理架构

npm install axios --save 安装 axios 从远程读取数据

npm install element-ui --save Element安装的关于Vue的组件库

npm install jquery --save 安装jQuery

npm install lib-flexible --save 安装移动端适配插件 然后在 main.js中引用 import 'lib-flexible'

事实上他做了这几样事情：

动态改写<meta>标签
给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
给<html>元素添加font-size属性，并且动态改写font-size的值

npm install vue-pull-refresh --save

npm install px2rem-loader --save-dev 安装px2rem-loader px转换成rem

npm install px2rem-loader -g--save 安装到开发环境

配置px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置

'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoaders:5   //在css-loader前应用的loader的数目，默认为0.
                      //如果不加这个  @import的外部css文件将不能正常转换
                      //如果不行  请试着调大数字
                      //更改后必须调大数字  否则无效
    }
  }
  const px2remLoader={
    loader:'px2rem-loader',
    options:{
      remUnit:75  //设计稿的1/10 ，我们假设设计稿是750px
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]   //添加px2remLoader

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  const output = []
  const loaders = exports.cssLoaders(options)

  for (const extension in loaders) {
    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }

  return output
}

exports.createNotifierCallback = () => {
  const notifier = require('node-notifier')

  return (severity, errors) => {
    if (severity !== 'error') return

    const error = errors[0]
    const filename = error.file && error.file.split('!').pop()

    notifier.notify({
      title: packageConfig.name,
      message: severity + ': ' + error.name,
      subtitle: filename || '',
      icon: path.join(__dirname, 'logo.png')
    })
  }
}

npm run build 打包生成 dist文件把里面东西上传服务器即可

postcss-import 安装 npm install postcss-import ／`postcss-import`主要功有是解决`@import`引入路径问题。使用这个插件，可以让你很轻易的使用本地文件、`node_modules`或者`web_modules`的文件。这个插件配合`postcss-url`让你引入文件变得更轻松。著作权归作者所有。

postcss-url 安装 npm install postcss-url 该插件主要用来处理文件，比如图片文件、字体文件等引用路径的处理。著作权归作者所有。

autoprefixer 安装 npm install autoprefixer 自动填写浏览器前缀

postcss-px-to-viewport 安装 npm install postcss-px-to-viewport 把`px`转换成`vw`。这样的好处是，我们在撸码的时候，不需要进行任何的计算，你只需要根据设计图写`px`单位

注：如果安装了 px2rem-loader 可卸载或者注销 build/utils.js 里的设置操作

接下来在.postcssrc.js文件对新安装的PostCSS插件进行配置：

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {}, 
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 750,     // (Number) The width of the viewport.
            viewportHeight: 1334,    // (Number) The height of the viewport.
            unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
            viewportUnit: 'vw',     // (String) Expected units.
            selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
            minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
            mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
        }, 
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
}

nodejs 最新版安装npm 的使用详解

作者：果汁凉茶丶

本篇文章主要介绍了nodejs 最新版安装npm 的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

# 安装 nodejs

以下介绍的是命令行安装方法，读者也可以到nodejs官网上下载安装。

sudo apt-get install nodejs-legacy
sudo apt-get instatll npm

升级npm为最新版本

sudo npm install npm@latest -g

往往用命令行安装的nodejs不是最新版本，而且升级nodejs并不是件非常简单的事情；这时我们需要用非常好用的nodejs版本管理模块n

sudo npm install -g n

通过模块n 安装指定版本的 nodejs

sudo n latest
sudo n stable
sudo n lts

我们可以通过查看版本号来检查是否安装成功和是否安装到想要的版本

node -v
npm -v

# 说说 npm

1、npm(node package manage) 是 nodejs的包管理器，用于 node 插件的管理包括安装、卸载、管理依赖等

2、使用npm安装插件，语法为; npm install <name> [-g] [--save-dev]

2,1 <name> ：要管理的插件名称，例如： npm install gulp-less --save-dev
2.2 -g ：全局安装。可选，不加时插件会安装到当前定位目录的node_modules文件夹下。全局安装的优势是可以在任何地方通过命令行调用。

2.3 --save ：保存配置信息到 package.json文件中。package.json是nodejs项目的配置文件。

2.4 -dev ：保存至package.json 的devDependencies节点，如果不加 -dev 将会保存至dependencies节点中。

2.5 为什么要保存至package.json中？因为node插件包很庞大，所以不加入版本管理，将配置信息加入package.json中可以指明这些插件需要进行版本管理，在浏览或其他开发者使用时就能明白应该使用那个版本的插件，同时用 npm intstall 安装时会根据package.json所指定的内容下载所需要的包。另外，用 npm install --production 只会下载package.json中dependencies节点的包

3、使用 npm 卸载插件，语法格式为： npm uninstall <name> [-g][--save-dev] 例如：npm uninstall vuex [-g][--save-dev] 卸载vuex

3.1 不要直接本地删除插件包

3.2 删除全部插件，语法为： npm uninstall gulp-less gulp-gulify gulp-concat ...
3.3 借助rimraf一次性删除： npm install rimraf -g ，用法 rimraf node_modules

4、使用 npm 更新插件，语法为： npm update <name> [-g] [--save-dev]

4.1 更新全部插件：```npm update [--save-dev]

5、查看 npm 帮助，语法为： npm help

6、查看已装插件，语法为： npm list

# 选用 cnpm

npm 服务在国外，因此受网络影响很大，经常会出现异常，淘宝团队为此做了完整的npmjs.org镜像，版本同步频率为10min一次。官网地址为： http://npm.taobao.org
安装cnpm，使用命令 npm install cnpm -g --registry=https://registry.npm.taobao.org 安装完成后用 cnpm -v 查看是否安装成功
cnpm的使用方法和npm完全一致，只需要把npm改成cnpm即可

# 新建 package.json 文件

package.json 文件是基于nodejs的项目必不可少的配置文件，它以普通json文件形式保存在根目录中。

内容及格式大致如下：(json文件不能注释，注意删除)

{
 "name": "test", // 项目名称（必须）
 "version": "1.0.0", // 项目版本（必须）
 "description": "project description!", // 项目描述（必须）
 "homepage": "", // 项目主页
 "repository": { // 项目资源库
  "type": "git",
  "url": "https://xxxx/xxx"
 },
 "author": { // 项目作者信息
  "name": "surging",
  "email": "xxx@163.com"
 },
 "license": "ISC", // 项目许可协议
 "devDependencies": { // 项目依赖的插件，加 -dev 安装会自动加到此处
  "gulp": "^3.8.11",
  "gulp-less": "^3.0.0"
 }
}

创建 package.json 文件，语法 npm init

cd ~/workspace/demo
npm init

然后一步步按提示往下填写信息即可，如下：

npm init

然后你可以看到文件夹下生成了一个 package.json 的文件，打印信息如下：

package.json 信息打印

当然你也可以手动创建，不过我相信你不会这么干。

4.查看package.json帮助文档，语法为： cnpm help package.json

jquery安装即配置：

npm install jquery -g--save 安装jquery 查看package.json里开发环境是否已经显示jquery版本，

在webpack.base.conf.js中加入一行代码

var webpack = require('webpack') 最上面添加

在webpack.base.conf.js中module.exports的最后加入这行代码，

plugins: [
　　new webpack.ProvidePlugin({
　　　　$: "jquery",
　　　　jQuery: "jquery"
　　})
],

在main.js中引入,加入下面这行代码

import $ from 'jquery'

最后一步，重新跑一边就好，npm run dev

npm install postcss-pxtorem --save 解决px 自动转换成rem问题包外部引用的css文件里的px 都可转换各种ui框架里的css 样式px都可转换

px2rem-loader 安装后无需引用作用所有.vue文件但是不能转所有外部引用的.css文件 , 包括 ui框架（element 和vant）的样式css文件里的px,无法转化成rem

subline 开发工具也可安装px转rem 插件，使输入的px自动转成rem ,但是项目如果用了ui 框架（element或者vant）就会有外部.css 文件就必须安装px 转rem插件可以考虑 postcss-pxtorem

vue 引用 vue-resource步

1、安装vue-resource到项目中，找到当前项目

输入：npm install vue-resource --save

2、安装完毕后，在main.js中导入，如下所示：

import VueResource from 'vue-resource'

Vue.use(VueResource）



bootstrap  安装引用：

1、boostrap 依赖 jquery 。首先在当前项目的根目录下（就是与package.json同目录），运行命令npm install jquery --save-dev 不需要在组件引入自动作用到每个组件中

不需要进行下面的配置也可以

然后修改webpack.base.conf.js两个地方：

其一：加入var webpack = require("webpack")；

其二：在module.exports的里面加入

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]

加到最后就好。

最后在main.js中加入import $ from 'jquery' 完成jQuery的引入。

2、安装bootstrap :npm install bootstrap --save

在main.js中import引入

import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap/dist/css/bootstrap.min.css'

3、还需要安装 popper.js 才能运行起来bootstrap 命令：npm install popper.js --save


npm install vue-pull-refresh --save  下拉刷新

npm install autoprefixer

posted @ 2018-01-16 22:51 Jinsuo 阅读(535) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

jinsuo

终端操作各插件安装配置

npm 安装指定版本（按版本安装）

配置px2rem-loader

postcss-url 安装 npm install postcss-url 该插件主要用来处理文件，比如图片文件、字体文件等引用路径的处理。著作权归作者所有。

autoprefixer 安装 npm install autoprefixer 自动填写浏览器前缀

postcss-px-to-viewport 安装 npm install postcss-px-to-viewport 把`px`转换成`vw`。这样的好处是，我们在撸码的时候，不需要进行任何的计算，你只需要根据设计图写`px`单位

nodejs 最新版安装npm 的使用详解

vue 引用 vue-resource步

公告

jinsuo

终端操作各插件安装配置

npm 安装指定版本（按版本安装）

配置px2rem-loader

postcss-url 安装 npm install postcss-url 该插件主要用来处理文件，比如图片文件、字体文件等引用路径的处理。著作权归作者所有。

autoprefixer 安装 npm install autoprefixer 自动填写 浏览器前缀

postcss-px-to-viewport 安装 npm install postcss-px-to-viewport 把px转换成vw。这样的好处是，我们在撸码的时候，不需要进行任何的计算，你只需要根据设计图写px单位

nodejs 最新版安装npm 的使用详解

vue 引用 vue-resource步

公告

autoprefixer 安装 npm install autoprefixer 自动填写浏览器前缀

postcss-px-to-viewport 安装 npm install postcss-px-to-viewport 把`px`转换成`vw`。这样的好处是，我们在撸码的时候，不需要进行任何的计算，你只需要根据设计图写`px`单位