npm换淘宝仓库

按如下方式直接在命令行设置

npm config set registry https://registry.npm.taobao.org

检测是否成功

// 配置后可通过下面方式来验证是否成功

npm config  get registry

// 或

npm info express

这样，我们可以使用淘宝镜像还不用更换成cnpm,是不是很爽！虽然实际都是使用的是淘宝镜像。

最后附上淘宝镜像官网地址：http://npm.taobao.org/

注：如果想还原npm仓库地址，只需再把地址配置成npm镜像就可以了

npm configsetregistry https://registry.npmjs.org/4

1、npm 设置淘宝镜像

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

2、删除淘宝镜像

npm config delete registrynpm config delete disturl

环境要求

查看是否安装node                  node -v

查看是否安装webpack            npm ls -g --depth 0

查看是否安装vue-cli                npm ls -g --depth 0

创建项目

1.cmd打开自己的项目工作空间，然后敲入命令：

vue init webpack  test  （其中test为项目名称）

2.填写项目信息

“Project name”：项目名称，默认是创建时的名称

“Project description”：项目描述

“Author”：作者

“Vue build”： 选“Runtime + Compiler” 运行+编译

“Install vue-router”:是否需要vue-router，默认选择使用

“Use ESLint to lint your code”:是否使用ESLint  N

“Set up unit tests with Nightwatch?”: 是否安装单元测试  N

“Setup e2e tests with Nightwatch”：是否安装e2e测试  N

3.进入目录安装

cd test

npm i

4.修改配置

修改test/build/utils.js

增加publicPath: '../../'

修改打包之后的背景图片的路径

修改test/build/utils.js

修改test/config/index.js

修改test/config/index.js 修改test/config/index.js

productionSourceMap：false----在设置了vue.config.js之后，就不会生成map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。

5.安装axios

npm i axios -D

6.安装sass

npm i sass-loader node-sass -D

7.安装ElementUi

npm i element-ui babel-plugin-component babel-preset-es2015 -D

修改 test/.babelrc 文件为如下内容：

{

 "presets": [

  ["es2015", { "modules": false }],

  "stage-2"

 ],

 "plugins": [

  [

   "component",

   {

    "libraryName": "element-ui",

    "styleLibraryName": "theme-chalk"

   }

  ]

 ]

}

8.安装jQuery

npm i jquery -S

修改test/build/webpack.base.conf.js

增加 const webpack = require('webpack')

增加 plugins: [

new webpack.optimize.CommonsChunkPlugin('common.js'),

new webpack.ProvidePlugin({

jQuery: "jquery",

$: "jquery"

})

]

test/src/main.js中引入即可 import $ from 'jquery'

9.安装echarts

npm i echarts -S

按需引入eg:

// 引入基本模板

 let echarts = require('echarts/lib/echarts')

 // 引入柱状图组件 折线图组件 饼图组件

 require('echarts/lib/chart/bar')

 require('echarts/lib/chart/line')

 require('echarts/lib/chart/pie')

 // 引入 图例组件和提示框

 require('echarts/lib/component/legend')

 require('echarts/lib/component/tooltip')

10.支持es6 新语法

npm i  babel-polyfill  -D

build/webpack.base.conf.js      app: ['babel-polyfill', './src/main.js']