vue-cli2项目搭建|vue-cli2项目搭建 PC
npm换淘宝仓库
按如下方式直接在命令行设置
npm config set registry https://registry.npm.taobao.org
检测是否成功
// 配置后可通过下面方式来验证是否成功
npm configget 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
环境要求
查看是否安装nodenode -v
查看是否安装webpacknpm ls -g --depth 0
查看是否安装vue-clinpm ls -g --depth 0
创建项目
1.cmd打开自己的项目工作空间，然后敲入命令：
vue init webpacktest（其中test为项目名称）
2.填写项目信息 
文章图片
“Project name”：项目名称，默认是创建时的名称
“Project description”：项目描述
“Author”：作者
“Vue build”： 选“Runtime + Compiler” 运行+编译
“Install vue-router”:是否需要vue-router，默认选择使用
“Use ESLint to lint your code”:是否使用ESLintN
“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 ibabel-polyfill-D
【vue-cli2项目搭建|vue-cli2项目搭建 PC】build/webpack.base.conf.jsapp: ['babel-polyfill', './src/main.js']
文章图片
推荐阅读
- 六步搭建ES6语法环境
- 17|17 关山松 第二课作业#公众号项目# D20
- RxJava|RxJava 在Android项目中的使用（一）
- Hacking|Hacking with iOS: SwiftUI Edition - SnowSeeker 项目（一）
- 靠QQ月入上万灰色暴利偏门的项目
- spring|spring boot项目启动websocket
- vuex|vuex 基础结构
- (1)redis集群原理及搭建与使用(1)
- 桁架搭建有什么价值（）
- 区块链开发平台（以太坊）