前言（扯皮）：

最近公司前端项目要重构，之前是纯Jquery+Bootstrap做的，虽然灵活易用而且要啥有啥，一顿jq插件什么都能实现，但是后期维护一下，妈呀，这哪个**写的**代码（自个儿想那是多刺激），反正最终项目是完成了，谁也不愿意去维护了，所以果断转战Vue,

 用Vue很舒服的啊，结构目录清晰，js,css,html划分非常明确，附图

老项目:页面构建代码冗余，不断copy造轮子，js代码全项目集中在一起，查找起来麻烦，修改起来还可能影响全局。

Vue：代码划分明确。数据块、初始化、方法块、html块、css块。修改起来简单易懂，快速明了

Jq→→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(这是开发环境调试用的指令，能够在修改页面后自动刷新同步网页，记小本本)

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

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

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

 

 

下节我将带来路由解说，并实例写个登录到首页的项目玩玩

运行乱码的，参照：https://blog.csdn.net/weixin_43734339/article/details/101363765

登录实例：https://blog.csdn.net/xj932956499/article/details/99647782