VUE 学习一 PHPSTORM 搭建VUE项目
主要参考了这篇文章https://blog.csdn.net/weixin_40760196/article/details/79952652https://blog.csdn.net/qq_35393869/article/details/83789761需要注意的是,1、node.js要安装最新版,一开始安装的版本很低,导致后面失败,所以要安装最新版的node.j...
一、搭建VUE项目
1、 需要安装的依赖
1)安装node.js ( Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。)
node.js 要安装最新版,一开始安装的版本很低,导致后面失败,所以要安装最新版的node.js
https://nodejs.org/zh-cn/download/
这个你懂得,很难打开,可以使用下面的地址下载
8.9 已经很老了, 创建新项目的时候,没问题 , 但是打开原来的项目的时,总是有问题,原因,原来项目对node.js版本由要求
2)node 的npm Node Package Manager node的包管理器 npm,是全球最大的开源库生态系统。
npm -v
3)安装淘宝镜像(类似于阿里云的maven中央仓库镜像)
npm install -g cnpm --registry=https://registry.npm.taobao.org
验证命令:cnpm -v
4)安装Webpack --可以看做是模块打包机
它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
cnpm install webpack -g
5)全局安装vue-cli
cnpm install --global vue-cli
二、创建VUE项目
1、命令行方式
CMD 今入某个文件夹,在此文件夹下,创建VUE项目
npm create vue@latest
根据提示来就可
创建完后,
文件夹下,就有了这个项目
cd 进入这个项目
nmp install 安装相关依赖
npm run dev 运行测试
2、php storm方式
注意 VUE 项目名字不能有大写字母
Note interpreter 为node.js地址(装好了会自动寻找),
VUE-CLI 为vue.js包的地址,
Project template 为打包所用的打包模块
选中package.json 右键选择 show npm scripts
3、我根据文章,运行到最后一步,双击dev 并没有运行,而是出错了
解决办法,关闭软件,重新打开运行
实在不行,删除掉 node_modules文件夹
再打开软件,运行,居然成功了
将http://localhost:8080/#/ 复制到浏览器上,就看到了演示效果
参考资料:
更多推荐
所有评论(0)