Vue入门学习教程1-1

安装Node.js

node.js官网链接:https://nodejs.org/en/

然后把下载下来的安装包、安装在本地
Vue入门学习教程1-1

检验是否安装成功
win+R 打开命令行、输入node -v 能看到版本号 则安装成功
Vue入门学习教程1-1

然后下载HBuilderX 这个编译器支持Vue语法、创建Vue项目也很方便

Vue入门学习教程1-1
安装完之后 新建一个vue项目
Vue入门学习教程1-1

这个是项目目录结构
Vue入门学习教程1-1
然后选中项目 打开右键菜单 选择外部命令 npm install
Vue入门学习教程1-1
安装完后的 项目目录结构是这样子的
Vue入门学习教程1-1
这是能看到多出了一个文件夹 node-modules 这个文件夹就是那些依赖包。然后下一步 也是选中项目-外部命令
选择 npm run build 完成之后 项目目录结构是这样子的:
Vue入门学习教程1-1
多了一个dist文件夹 这个文件夹是项目打包后生成的文件夹

最后最后 运行外部命令 npm run server
Vue入门学习教程1-1
这样项目就跑起来了 然后浏览器访问 http:localhost:8081

Vue入门学习教程1-1
一个Vue项目就搭建起来了 嘿嘿~