首先我搭建vue+webpack+vue-strap+vue-route+sass时，我用的是直接在项目中的package.json中的“devDependencies”直接将直接需要的一些插件写上。然后用“npm install”的方式。
1、首先你要安装好nodejs。
2、新建项目，在新建的项目vue中打开输入：“npm init --yes”生成package.json。
3、在package.json中的“devDependencies”加上直接所需的插件。在windows7中可以直接输入：“npm install”，但不知道为什么windows10中有一些不可以用。可能是我环境变量配置过的原因。但我们也可以用npm的方式下载到本地，下面我会具体说的。
在package.json可以配置：{/*以下的所有注释在package.json都应该去掉，否则会报错。在windows7中可以直接用，但不知道为什么windows10中不就可以用。可能是我环境变量配置过的原因*/
"name": "ex1",//名字但绝对不能是webpack
"version": "1.0.0",
"description": "vue-ex",//描述，随便
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-core": "^6.14.0",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.18.0",
"browser-sync": "^2.18.2",
"css-loader": "^0.25.0",//加入css文件的加载。
"ejs-compiled-loader": "^2.1.1",
"element-ui": "1.2.9",//前端样式，和下面的vue-strap（即bootstrap样式）两者选其一
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"glob": "^7.0.6",
"gulp": "^3.9.1",
"gulp-file-include": "^1.0.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^3.7.0",
"raw-loader": "^0.5.1",
"sass-loader": "^4.0.2",//加入sass文件的加载。可以直接读取sass文件
"scss-loader": "0.0.1",
"style-loader": "^0.13.1",//用来插入<style>
"tween.js": "^16.6.0",
"url-loader": "^0.5.7",
"vue": "2.2.6",
"vue-loader": "^10.0.2",
"vue-resource": "^1.0.3",
"vue-router": "^2.4.0",
"vue-style-loader": "^1.0.0",
"vue-strap":"1.1.40",//前端样式，和下面的element-ui两者选其一
"vue-template-compiler": "2.2.6",
"vuex": "^2.0.0",
"webpack": "^3.0.0",//webpack
"webpack-dev-server": "^2.4.5"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --hot --inline"
},
"author": "shi",
"license": "ISC"
}
在公司window7的老电脑上没有问题，然后在家中的windows10的新电脑中遇到了2个问题：
1、“Windows_NT 10.0.15063”：是由于windows10默认是不用管理员权限打开PowerShell的，所以我们只有用快捷键“win+x”然后选择管理员就行。
2、“Can't find Python executable "python", you can set the PYTHON env variable.”：这个问题就已经说明c下面没有python。然后我们只要到网上找一个python27的安装安装到C盘下就行。然后在环境变量-》系统变量-》Path中设置一下路径进行。然后再运行“cpm install”安装好了。但这里安装好的webpack只是在项目中本地安装了，作用与“npm install webpack –save-dev”一致。本来想尝试官网推荐本地安装，但本地安装好了运行“webpack -h”一直说webpack不是内部命令。没有办法只能再安装全局了：“npm install webpack -g ”。如果有大大知道本地安装好了之后怎么使用的请务必交一下我。
然后在安装全局的时候，也遇到了一个问题：由于windows10默认一般都不是管理员权限安装的的，所以我安装的时候一直都安装在了“C:Users用户名AppDataRoamingnpm”这个路径下面。由于它不是全局环境，安装好了之后运行“webpack -h”也一直报“webpack不是内部命令”。这只是它没有安装在全局下的原因，只要将其在环境变量中设置成全局的就行。但我的nodejs是安装在D盘的，我想所有的npm安装的都存在到d中对应的nodejs文件中。
下面的操作：
1、首先nodejs中有“node_cache”和“node_global”，这两个文件就是之后原来存放npm下载的东西的。
然后打开cmd窗口：npm config set prefix "D:\Program Files\nodejs\node_global"、npm config set cache "D:\Program Files\nodejs\node_cache"
2、进行环境变量的设置：“用户变量”-》“Path”
3、系统变量中新建一个“NODE_PATH”
4、系统变量中“Path”将画红线的去掉（我的之前加过所以去掉，如果没有的话就不用去掉了）
二、下载插件到项目本地的语句
- 首先要安装babel，因为要将es6转成es5：npm install –save-dev babel-cli、npm install –save-dev babel-preset-es2015、npm install –save-dev babel-preset-stage-0、npm install –save-dev babel-loader
- 安装browser-sync，浏览器同步工具。简单来说就是当你保存文件的同时浏览器自动刷新网页，省去了手动的环节，大大的节省了开发时间。npm install –save-dev browser-sync
- 安装css-loader：npm install –save-dev css-loader
- 安装html-webpack-plugin：可以用来设置页面模板，简化了HTML文件的创建，以便为webpack包提供服务。这对于在文件名中包含每次会随着变异会发生变化的哈希的webpack bundle尤其有用。npm install html-webpack-plugin
- ejs-compiled-loader，因为HtmlWebpackPlugin插件并不具备ejs模板语言所有的功能，其中一个就是不能识别<%include %>语句，这时需要安装一个ejs-compiled-loader。npm install ejs-compiled-loader
好了到这里，在到cmd运行“npm install webpack -g”就可以正常了下载了，下载后“webpack -v”可以得到版本。接下来我们尝试一下：在vue中新建文件“index.html”、“index.js”、“webpack.config.js”。
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<title>vue ex1</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>document.write("hello world");//index.js//webpack.config.js
let path = require('path');
let webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
filename: "bundle.js"
},
module: {
rules: [
]
}
};然后cmd中运行“webpack”，会生成一个dist文件夹和一个“dundle.js”文件。运行index.html,到此第一天的环境搭建就完成了。
