#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)
以上,完毕。