一、搭建VUE项目

1、 需要安装的依赖

1)安装node.js  ( Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。)

node.js 要安装最新版,一开始安装的版本很低,导致后面失败,所以要安装最新版的node.js

https://nodejs.org/zh-cn/download/

这个你懂得,很难打开,可以使用下面的地址下载

http://nodejs.cn

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/#/ 复制到浏览器上,就看到了演示效果

参考资料:

快速上手 | Vue.js

用webstorm搭建vue项目_webstorm package manage-CSDN博客

WebStorm 零起点搭建Vuejs项目 - 全程篇_webstorm vue.js-CSDN博客

Logo

前往低代码交流专区

更多推荐