win10运行vue项目_vue+webpack在window10环境下搭建及遇到的问题

首先我搭建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",//用来插入

"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模板语言所有的功能，其中一个就是不能识别语句，这时需要安装一个ejs-compiled-loader。npm install ejs-compiled-loader

好了到这里，在到cmd运行“npm install webpack -g”就可以正常了下载了，下载后“webpack -v”可以得到版本。接下来我们尝试一下：在vue中新建文件“index.html”、“index.js”、“webpack.config.js”。

vue ex1

document.write("hello world");//index.js

//webpack.config.js

let path = require('path');

let webpack = require('webpack');

module.exports = {

entry: './index.js',