VUE 学习一 PHPSTORM 搭建VUE项目

一、搭建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博客