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 ex1document.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,到此第一天的環境搭建就完成了。
總結
以上是生活随笔為你收集整理的win10运行vue项目_vue+webpack在window10环境下搭建及遇到的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 鼠标移动响应php程序,jQuery实现
- 下一篇： 4怎么放大字体_win8.1系统如何放大