Visual Studio 2019 建立初始Vue项目

科普(抖机灵):
Nodejs与Vue的关系
Nodejs:Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,其意义相当于java的jvm一样,提供了一个环境
Vue:尤大大(有名人物)建立的一套用于构建用户界面的渐进式JavaScript框架.基于node上运行

一 、运行环境安装(Node安装)
安装:Vue项目一切基于Node.js,so 必须先安装NodeJS,附下载地址
https://nodejs.org/zh-cn/download/

版本检查:安装完毕之后,win键+R,输入cmd

查看一下是否真成功了cmd里面直接输入:

node -v 和 npm -v 得到如下图版本类似的信息证明装好了。
Alt

二、新建Vue项目
我的vue项目是由Visual Studio 2019搭建,所以教程是带你用VS2019的哦,虽然市面上大部分是VsCode搭建,但我们之前项目也是基于VS2019的所以直接还是用了一样的,毕竟用熟了比较快,而且VS2019这么强大,啥都能写。

1)确认Visual Studio 2019环境:看扩展工具里有没有勾选NodeJs

Alt

Alt

2)确保没毛病就开始建项目 :左上角——文件——新建——项目——输入自己的项目名,选好准备存哪,妥了
Alt
Alt

3)右键项目名:选择“在此处打开命令提示符” 运行npm的指令 npm install -g(这个指令会把你项目缺失的组件包全部补全,可以记个小本本),然后结束后再运行指令npm run serve(这是开发环境调试用的指令,能够在修改页面后自动刷新同步网页,记小本本)
Alt
Alt
PS:此处 npm install -g指令可能会安装失败,需要查看npm下的组件包是否会出现缺失情况(此情况会导致运行npm run serve 时报错,提示某些指令不存在等),可使用npm install -g vue-cli

4)如果上面一切顺利的话,你就可以Hello World了

按他的提示打开浏览器输入localhost:8080(一般是这个地址,如果被占用了他会自动切8081等,所以最终你还是看他提示)

注意:如果有脚手架(Vue-cli)报错,那运行一下这个npm install -g vue-cli

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章