VS Studio 2017 做Vue项目

一 、安装环境

Vue项目一切基于Node.js，so 必须先安装NodeJS,附下载地址https://nodejs.org/zh-cn/

进去之后选择合适的下一个，按着提示安装就行，装完之后win键+R，输入cmd

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

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

二、新建Vue项目

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

附上下载链接https://visualstudio.microsoft.com/zh-hans/

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

 

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

3）右键项目名：选择“在此处打开命令提示符” 运行npm的指令 npm install -g（这个指令会把你项目缺失的组件包全部补全，可以记个小本本），然后结束后再运行指令npm run serve(这是开发环境调试用的指令，能够在修改页面后自动刷新同步网页，记小本本)，服务器退出命令：Ctrl+C

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

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

注意：如果有脚手架报错，那运行一下这个npm install -g vue-cli 或 npm install 自动补齐缺失的包

 

接着就是更改项目路径，创建完了以后，项目中包含

如下文件，我大概打开看了一下，因为vue都是模块化开发，所以新创建文件都在components中

　　a、index.html就是前端文件，里面应该就是我们以前写html的layout，里面都是公用的一些标签

　　b、App.vue我觉得像路由（因为第一次创建项目，还不知道路由到底是什么，先暂且这么定义吧），里面的代码沿着引入别的文件---放在自己的页面的流程，而且红色框框里面的缺一不可

　　　　百度里面说（App.vue是我们的主组件，所有的页面都在App.vue下进行切换。我们可以将router标示为App.vue的子组件），我先放在这，以后检验。

---

　　经检验：App.vue就跟基础页面一样，所有页面切换都走这个页面

　　

　　　　注：vs注释代码，是选中以后点这个就好

 

 

　　c、home.vue就跟我们之前的前端文件里面一样，只不过将html放在了template里面（注意：template里面的元素要先有一个总的div包裹所有别的标签，不然引入会有问题，这或许和vue模块化开发有关，一个页面是一个模块）

　　

　　d、如果要新增页面，则在components新增文件，文件名为demo1，然后再App.vue里面添加代码，就可以渲染出来

　　

 

引用：https://blog.csdn.net/xj932956499/article/details/99624917

引用：https://www.cnblogs.com/shirley-csdn/p/11327525.html