Preface (wrangling):
Recently the company projects to reconstruct the front end, before pure Jquery + Bootstrap do, though flexible to use and what to Han, meal jq plug what can be achieved, but the post-maintenance look, the mother, which it wrote ** ** Code (myself think it is more stimulus), the final project is completed anyway, who wants to maintain, so he moved decisively Vue,
Vue with a very comfortable ah, the directory structure clear, js, css, html division is very clear, drawings
Old items: page builder code redundancy, continuous copy-create the wheel, js code that whole project together and look up trouble, modify it may also affect the overall situation.
Vue: Code is clearly defined. Data block, initialized, block method, html block, css block. Modify them easy to understand, quick to understand
Jq→→Vue
First, the installation environment
Vue project all based on Node.js, so you must first install NodeJS, attached Download https://nodejs.org/zh-cn/
Select the appropriate next, according to prompts on the line go after installation, win key + R, type cmd Zhuangwan
Check to see if there really was successful cmd direct input:
node -v and npm -v get the following diagram similar to the version information to demonstrate fitted.
Second, the new Vue project
My vue project by Visual Studio 2019 to build, so the tutorial is to take you with VS2019 Oh, although most of the market is VsCode structures, but also based on our previous projects it directly or use the same VS2019, after all, familiar with faster, and VS2019 so powerful, and consequently can write.
Attach the download link https://visualstudio.microsoft.com/zh-hans/
1) confirm the Visual Studio 2019 environment: looking to expand the tool, there is no check NodeJs
2) ensure that no problems began construction project: the upper left corner - File - New - Project - enter your project name, ready to save selected which, properly the
3）右键项目名：选择“在此处打开命令提示符” 运行npm的指令 npm install -g（这个指令会把你项目缺失的组件包全部补全，可以记个小本本），然后结束后再运行指令npm run serve(这是开发环境调试用的指令，能够在修改页面后自动刷新同步网页，记小本本)
4）如果上面一切顺利的话，你就可以Hello World了
按他的提示打开浏览器输入localhost:8080（一般是这个地址，如果被占用了他会自动切8081等，所以最终你还是看他提示）
注意：如果有脚手架报错，那运行一下这个npm install -g vue-cli
下节我将带来路由解说，并实例写个登录到首页的项目玩玩
运行乱码的，参照：https://blog.csdn.net/weixin_43734339/article/details/101363765
登录实例：https://blog.csdn.net/xj932956499/article/details/99647782
