終端操做各插件安裝配置

時間  2019-11-21
標籤 終端 插件 安裝 配置 简体版
原文   原文鏈接

終端的操做命令：css

 

sudo npm uninstall npm -g 卸載  node
sudonpm uninstall vue-cli -g 卸載 vue-cli

 

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

 
 
 版權聲明：本文爲博主原創文章，未經博主容許不得轉載。 https://blog.csdn.net/xuaner8786/article/details/81630445 
npm install jquery@3.0.0 --save

 

在package.json中能夠看到：html

"jquery": "^3.0.0"

一、全局安裝vue

npm install xxx -g //模塊將被下載安裝到【全局目錄】中

二、本地安裝node

npm install xxx //則是將模塊下載到當前命令行所在目錄

三、信息寫入jquery

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。webpack

npm install --save vue-awesome-swiper   輪播插件 ios

 

 

 window系統  win+r  輸入cmd打開終端git

ls 查看當前目錄下的文件github

pwd查看當前所在路徑web

cd  後面空格  而後寫目錄  進入某個目錄

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

一、npm(node package manage) 是 nodejs的包管理器，用於 node 插件的管理包括 安裝、卸載、管理依賴等

二、使用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節點的包

三、使用 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

四、使用 npm 更新插件，語法爲： npm update <name> [-g] [--save-dev] 

4.1 更新所有插件：```npm update [--save-dev]

五、查看 npm 幫助， 語法爲： npm help

六、查看已裝插件，語法爲： npm list

# 選用 cnpm

  1. npm 服務在國外，所以受網絡影響很大，常常會出現異常，淘寶團隊爲此作了完整的npmjs.org鏡像，版本同步頻率爲10min一次。官網地址爲： http://npm.taobao.org
  2. 安裝cnpm，使用命令 npm install cnpm -g --registry=https://registry.npm.taobao.org 安裝完成後用 cnpm -v 查看是否安裝成功
  3. 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步

一、安裝vue-resource到項目中，找到當前項目

輸入：npm install vue-resource --save

 

二、安裝完畢後，在main.js中導入，以下所示：

import  VueResource  from 'vue-resource'

Vue.use(VueResource）

 



bootstrap 安裝引用：

一、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的引入。

 

二、安裝bootstrap :npm install bootstrap --save

 

在main.js中import引入

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

 

 

三、還須要安裝  popper.js   才能運行起來bootstrap    命令：npm install  popper.js --save  

 


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

 npm install autoprefixer   

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程