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',
output: {
path: path.join(__dirname, 'dist'), //输出目录的配置,模板、样式、脚本、图片等资源的路径配置都相对于它
filename: "bundle.js"
},
module: {
rules: [
]
}
};
然后cmd中运行“webpack”,会生成一个dist文件夹和一个“dundle.js”文件。运行index.html,到此第一天的环境搭建就完成了。
win10运行vue项目_vue+webpack在window10环境下搭建及遇到的问题相关推荐
- win10自带sftp服务器_FreeSSHD在Windows环境下搭建SFTP服务器
0 建议现在Windows环境下安装cygwin,否则在Windows环境下cmd模式使用不了sftp去连接,可以利用win scp去测试连接 2 安装 傻瓜式一键安装 安装过程中会提示"提 ...
- Vue项目设置代理解决开发环境下的跨域问题
首先需要安装axios,推荐使用npm安装 $ npm install axios --save 配置config->index.js中的proxyTable,内容如下: proxyTable: ...
- win10快速运行vue项目跑起来 - 方法篇
如何让win10更快速跑vue项目运行起来? 不用再每次先cd到项目目录了, 直接进入根文件夹后,再打开Powershell窗口,可以省略一大堆操作 (详情如下简介) 快捷操作如下: 先打开,并进入 ...
- 如何运行vue项目 ?(详解,建议收藏) ❤️
如何运行vue项目 (详解,建议收藏) 转载 首先,列出来我们需要的东西: node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 安装node.js 从no ...
- Error: error:0308010C:digital envelope routines::unsupported问题的解决方案包括webstorm运行vue项目的解决方案
原因:主要是nodejs17版本发布了OpenSSL3.0对算法和秘钥大小增加了更为严格的限制,npm升级导致了与OpenSSL不兼容导致的初始化失败,而我的电脑上的node.js是v18.16.0的 ...
- 记录,再次运行vue项目报错POST http://127.0.0.1:8888/api/private/v1/login/login
可以打开登录界面,却无法打开登录后界面 代码没有问题,查阅资料后是后台服务器没打开 删除package-lock.json文件 运行npm install 再次运行node .\app.js 打开ph ...
- 运行VUE项目时,出现npm ERR! A complete log of this run can be found in:...报错
运行VUE项目时,出现npm ERR! A complete log of this run can be found in:报错时,分享以下一种解决方案. 本机的 node版本如下 解决方法 1. ...
- vue 不生效 打包 样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
- 在运行vue项目时发生这种 Cannot find module ‘xxxxx‘ ,解决办法?
在运行vue项目时发生这种 Cannot find module 'xxxxx' ,解决办法? 首先,在文件夹中删除掉node_modules文件和package-lock.json文件 其次,在使用 ...
最新文章
- 【组队学习】【30期】李宏毅机器学习(含深度学习)
- ThreadLocal使用
- 离开当前屏幕的判断方法_掌中宝系列之EMG电动门调整方法
- 响应信息不明确的接口做关联
- 用python定义一个员工类_python3 类的定义
- 9型转x型 cobol_多重排斥、价值嬗变与农村跨省婚姻研究——以东莞宗族型X村为例...
- Linux中fdisk硬盘分区方法
- 使用DbContextPool提高EfCore查询性能
- 用自己的ID在appstore中更新app-黑苹果之路
- 吴恩达机器学习【第三天】线性代数基础知识
- Gartner最新洞见:数据分析将是改变“游戏规则”的技术、企业的中台需要可组装的架构
- 标准代码页(codepage)列表
- Java-idea-eclipse-快捷键【mac,win】
- ThinkPHP截取部分文章文字、字符串
- 写一个含数字,拼音,汉字的验证码生成类
- 用SIR模型处理新冠疫情
- 常用的webservice接口(转)
- C# Winform Socket即时通讯
- 微信公众号二维码怎么生成?好用的生成方法介绍
- 微信小程序-店内点餐小程序
热门文章
- c语言自动拷贝u盘文件,写了一个偷偷拷贝老师U盘所有文件的程序……蛋疼……………...
- 两边双虚线是什么意思_行星减速机生产厂家解析行星减速机双支撑与单支撑
- python数据集的预处理_关于Pytorch的MNIST数据集的预处理详解
- python实例 79,80
- 【OpenCV 例程200篇】72. 一维离散傅里叶变换
- idea 分支管理插件_Git的分支管理常用命令
- python萤火虫算法_FA:萤火虫算法的测试及Python实现
- 【Python】Python中内置的%操作符
- Spring 实战-第一章-基本概念
- 网络开发必备的HTTP协议知识