终端的操做命令：css
sudo npm uninstall npm -g 卸载 node
sudonpm uninstall vue-cli -g 卸载 vue-cli
版权声明：本文为博主原创文章，未经博主容许不得转载。 https://blog.csdn.net/xuaner8786/article/details/81630445
在package.json中能够看到：html
"jquery": "^3.0.0"
一、全局安装vue
npm install xxx -g
二、本地安装node
npm install xxx
三、信息写入jquery
npm install xxx
--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 安装到开发环境
在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,
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
经过 模块n 安装指定版本的 nodejs
sudo n latest
sudo n stable
sudo n lts
咱们能够经过查看版本号来检查是否安装成功和是否安装到想要的版本
# 说说 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
- 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步
一、安装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