vue，elementUI，less，axios，qs的安装及打包

目前一直使用vue去搭建项目，我个人习惯用Visual Studio Code编辑工具，所以下面的所有操作都是在这个编辑器中

在安装的时候，为了避免安装过程中出错，你最好安装了淘宝镜像（官网：https://npm.taobao.org/）

npm install -g cnpm --registry=https://registry.npm.taobao.org

1，安装vue-cli

cnpm install vue-cli -g        //    通过vue -V查看vue版本号

vue init webpack

Generate project in current directory? (Y/n)  在当前目录中生成项目（是）

Project name (admin)项目名称

Project description (A Vue.js project) 项目描述

Author    作者

Vue build (Use arrow keys)选则Runtime + Compiler: recommended for most users

Install vue-router? (Y/n)是否下载vue-router（是）

Use ESLint to lint your code? (Y/n)是否使用ESLint（否）

Set up unit tests (Y/n)是否设置单元测试（否）

Setup e2e tests with Nightwatch? (Y/n) 是否使用e2e（否）

Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)项目创建后，我们应该为您运行“NPM安装（是）

npm run dev    运行项目

2，安装elementUI

cnpm install element-ui --save

在main.js中写入以下内容:

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'   （这的路径可能会有所改动）

Vue.config.productionTip = false

Vue.use(ElementUI)

new Vue({

el: '#app',

router,

components: { App },

template: ''

})

3，安装less（CSS 预处理语言）

cnpm install less less-loader --save

<style lang="less">    在使用less的文件中的style标签上添加 lang="less"

<style>

4，安装axios

cnpm install axios --save

import axios from 'axios'    哪个文件需要用到就在哪个文件中引入

5，安装qs

npm install --save axios vue-axios qs

import qs from 'qs'   qs 用来解决vue中post请求以 a=a&b=b 的格式（详情）

6，打包

由于直接打包不能正常预览，所以需要配置

在webpack.prod.conf.js中output添加参数publicPath:'./'

由于现在网上搭建方式很多，可能由于版本问题原因，有些搭建方式有问题。所以本文只是对自己快速搭建环境而写！

作者：莫言_df49
链接：https://www.jianshu.com/p/92921c80474e
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。