[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)

安装VUE

安装Node.js

下载地址https://nodejs.org/zh-cn/
下载安装完成打开cmd windows键+r 输入cmd或者搜索打开
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)输入 node -v
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)
出现这种情况安装完成

切换淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)
回车就行

然后安装vue(4.0+)

npm install -g @vue/cli
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)
同样回车
vue -V(大写的V)
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)
此时安装成功
vue ui可以打开可视化界面
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)

创建项目

浏览器输入localhost:8000就可以打开
(此处动图有误,history router不建议开启)
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)
如上图就 可以创建新项目
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)
这些需要
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)

Lint on save 保存就检查(选择方便开发时编译)
js代码检验工具 ESLint + Prettier(用得多)
css 预处理器 Sass/SCSS(with dart-sass) 保存时编译
history router,路径是否带 # 号,不建议开启

可以保存为预设 方便下次项目搭建配置
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)这里也会显示

[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)

等待完成即可

http://localhost:8000/dependencies
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)可以看到你的项目,左下角可以切换项目/主页/创建
在这里可以安装一些插件依赖
比如发送网络请求需要的axios(本系列后面会讲)
怎么运行呢?往下看

运行

将项目拖进Hbulider x(方便后面使用)
(或者直接在文件夹cmd) 或者在可视化界面选择任务然后serve启动

[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)
在终端中输入npm run serve
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)
此时启动完成 在浏览器打开localhost:8080即可
[前端框架]初识VUE---我要得到你的第一次(安装vue以及搭建第一个vue项目)

你的vue的第一次到此刻就陪你拿了

后续会推出

前端:js入门 vue入门 vue开发小程序 等
后端: java入门 springboot入门等
服务器:mysql入门 服务器简单指令 云服务器运行项目
python:推荐不温卜火 一定要看哦
一些插件的使用等

大学之道亦在自身,努力学习,热血青春
如果对编程感兴趣可以加入我们的qq群一起交流:974178910
有问题可以下方留言,看到了会恢回复哦