#vue#【一】 如何搭建一个新的vue目录文件

#vue# 如何快速搭建一个新的vue目录文件

软件/工具： 以WebStorm为例
大前提：已安装了WebStorm，且已经搭建好开发环境
（ps:若不会搭建开发环境可点击此教程）

vue-cli需要npm 也就是需要安装node环境，我们打开node下载页面
https://nodejs.org/zh-cn/download/

然后像普通软件一样 一直下一步就OK了

校验node是否完成安装通过 win + R 输入cmd 按回车打开命令行

#查看node
node -v
#查看npm
npm -v

看到版本号表示安装成功

npm配置一下淘宝镜像

 npm config set registry https://registry.npm.taobao.org

执行vue-cli 安装命令

npm install -g vue-cli

在命令行窗口输入vue查看vue是否安装成功，如果报错执行以下先 执行以下代码,输入Y,然后回车即可

set-ExecutionPolicy RemoteSigned

得到的结果如下

这样子表示vue已经安装完毕，可以直接使用vue构建项目

以下为搭建新vue目录文件的全部步骤：

第一步：
打开电脑左下角，找到powershell ，右键选择“以管理员身份运行”

第二步：
在指定的盘里，自定义一个文件夹
例如：在D盘新建了一个“vuevue”文件夹

第三步：
回到powershell处

在上面圈红的位置，输入以下执行命令，再按enter键

vue init webpack vuevue(即系自定义的那个文件名)

如果在操作的过程中，不小心关闭了运行页面，
可以在放文件夹的目录处，按住shift+右键即可

第四步：
等加载到看到以下圈红内容时

就输入下面这个执行指令

cd D:\vuevue(自定义的文件名)

ps:cd 的意思就是进入到你具体的目录，
此外由于powershell 是默认就进入c盘，
所以在输入指令的时候，
需要注意要加上 具体的位置（例如D）
cd D：\vuevue(自定义的文件名)

第五步：
在WebStorm里面打开文件夹


第六步：
在“Terminal”处输入以下指令，再按enter键
（ps:此指令只需要在第一次新建项目结构时输入，后面再使用该vue目录，无需再输入）

npm install

第七步：
待以上指令执行完毕后，
输入最后一个指令，按enter键
（ps:这个指令需要在每一次打开vue时，都要输入，进行加载）

npm run dev

等到出现以下内容，即已成功新建了vue目录文件了

点击即可访问，
也可通过访问本机的8080端口
或在浏览器输入http://localhost:8080
也可以输入http://127.0.0.1:8080
（ps: localhost等价于127.0.0.1）

以上，完毕。