vue第一课 vue-cli 搭建基本开发环境

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

image.png

image.png

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

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

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

image.png

看到版本号表示安装成功

npm配置一下淘宝镜像

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

image.png

执行vue-cli 安装命令

npm install -g vue-cli

image.png

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

set-ExecutionPolicy RemoteSigned

得到的结果如下

image.png

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

新建一个demo1的目录 cd demo1进入这个目录

image.png

如果这个时候命令行窗口不小心关闭了 可以在当前目录下按住shift + 右键

image.png

输入命令进行初始化 demo1就是你随便起的名字

 vue init webpack demo1

这里提示一些关于项目的描述 如果只是使用默认值就一直按enter即可

image.png

image.png

类似上图这样子那么一个vue的项目基本的结构就生成了

这个时候我们打开webstrom 执行一下npm install

image.png

install 完毕之后执行 npm run dev

image.png

从上图可以看到 访问本机的8080端口就可以看到我们的应用啦
可以在浏览器输入http://localhost:8080 或者 http://127.0.0.1:8080 因为localhost等价于127.0.0.1

image.png

我们修改一下代码看看

image.png

image.png

至此 vue项目 基本架构搭建完毕