【首先安装node.js】：
1. 从node.js官网下载并安装node，安装过程很简单。
2. npm 版本需要大于 3.0，如果低于此版本需要升级它：
# 查看版本
??npm -v
2.3.0
#升级 npm
??cnpm install npm -g
3.基于node.js,利用淘宝npm镜像安装相关依赖。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像（http://npm.taobao.org/）
??npm install -g cnpm --registry=https://registry.npm.taobao.org
1
完成之后，我们就可以用cnpm代替npm来安装依赖包了。
三、安装vue-cli脚手架构建工具
安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
cnpm install -g vue-cli
回车，等待安装...
vue
回车，若出现vue信息说明表示成功！！！
【然后：】
1· 切换到想要安装的目录文件下:
???cd 路径名称
2· vue init webpack 新建项目名称
???【如果安装不成功，可执行此命令解决error错误：
??????npm cache clean --force ??】 ???
3· 一路enter键，--->3个yes一个no ?// ?或者1个yes3个no
4· cd 项目名称
5· 运行Vue的指令： npm run dev
6· 安装路由vue-router：：
???npm install vue-router --save-dev
7· 安装axios插件，用于调接口restful，或者读取数据
???npm install axios --save-dev
8· 安装swiper轮播插件 ?或者 ?vue-awesome-swiper插件其中1个：：
???npm install swiper --save-dev
???npm install --save-dev vue-awesome-swiper
9· 安装3个封装好的插件：（muse-ui ?mint-ui ?element-ui）
??npm install muse-ui --save-dev
??npm i mint-ui -S
??npm i element-ui -S
10· 安装css和less插件：
??npm i ?--save-dev ?less less-loader
??npm i ?--save-dev ?css-loader style-loader
【webpack环境构建：】
1· 创建项目根目录（文件名）切换到目录
2· 初始化
???npm init -y
3· 全局安装（安装过可以不用安装）
???npm install webpack -g
4· 安装webpack服务（必须安装）
???npm install webpack --save-dev
???--save: 将安装的包的信息保存在package中
???--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件
5· 【重要】安装webpack开发工具（必须安装）
???npm install webpack-dev-server --save-dev
6· 加载css、less 模块：：
???1·安装css-loader
?????npm i --save-dev css-loader style-loader
??
???2·安装less -loader
?????npm i --save-dev less less-loader
【重要配置引入：：】
在index.html文件的head部分引入弹性盒配置的属性：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
在index.html文件的body主体部分【引入出口-bundle.js文件】：
<script src="js/bundle.js" type="text/javascript" charset="utf-8"></script>
7· 项目运行的命令,【先切换到js目录】 （编译 entry.js并打包到 bundle.js文件中）
??
????直接执行： webpack
?????????或者
?????webpack entry.js bundle.js
8· 【重要：写代码时--实时监听热更新 --progress --colors --watch 插件】
?????【不用每次都执行刷新的命令webpack，手动F5在浏览器直接刷新即可！】
????webpack --progress --colors --watch ?
9· 项目运行打包【压缩】的命令：
???webpack ?-p（在此之前必须先执行webpack指令）
???
???【 1·如果打包压缩不成功，例如：函数方法find()--->改为find:function()的写法，
??????2·template模板中不解析【上引号``---->改为 ??1·单引号必须写为一行， ??2·或者使用拼接符“+号”】
???】
基本使用：：
1·首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
2· 创建entry.js
使用路由：必须写这句话---- ?【 Vue.use(VueRouter); ?】
//在页面中引入文件，例如：：
require(‘../css/style.less‘);
// entry.js ?: 在页面中打印出一句话
document.write(‘It works.‘)
3·创建配置文件webpack.config.js
??
var webpack = require(‘webpack‘)
module.exports = {
?entry: ‘./entry.js‘,
?output: {
???path: __dirname,
???filename: ‘bundle.js‘
?},
?module: {
???loaders: [
???????//配置css::
?????{
???????test: /\.css$/,
????????loader: ‘style-loader!css-loader‘
?????},
??????
?????
?????//配置less::
?????{
???????test: /\.less$/,
???????loader: ‘style-loader!css-loader!less-loader‘
??????}
???
?]
?}
}
使用模块：：
1· 创建模块module.js,在内部导出内容
????module.exports = ‘It works from module.js‘
2· 在entry.js中使用自定义的模块
???//entry.js
???document.write(‘It works.‘)
???document.write(require(‘./module.js‘)) // 添加模块
Vue项目模板--和--webpack自动化构建工具的---项目打包压缩使用
原文地址：https://www.cnblogs.com/chenhongshuang/p/8823918.html