Vue 微服务框架 基本常规配置

1. Vue框架项目工程搭建

1. 知识背景：
   安装Node.js
   Vue的安装及使用快速入门
   前台vue教程

2. cd命令至项目文件目录：

   cd F:\Computer\Computer_Web_leading_end\log4j-pig-ui-master\pig-ui
   

3. vue及vue/cli安装命令:

   npm install -g vue 
   npm install -g @vue/cli-init
   

4. 全局安装脚手架工具vue-cli：

   npm install --global vue-cli
   

5. 安装webpack框架中package.json中所需要的依赖：

   npm install  // 全面安装
   如下，若没有安装webpack，则先安装webpack
   
   npm install -g webpack  // 针对性安装
   

6. 通过js文件，引入vue模块，并且输出测试：

   var vue = require("vue")  // require命令的基本功能是，读入并执行一个JavaScript文件(vue_object.js)，然后返回该模块的exports对象。
   console.log(vue)
   

7. vue项目初始化:

   vue init webpack myVue  // vue项目初始化命令
   

8. 通过node执行该js文件：

   F:\Computer\Computer_Web_leading_end\pig-ui>node vue_object.js
   

9. 启动整个项目运行，执行了package.json中的script脚本（底层相当于执行：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js命令）：

   npm run dev
   

10. web模块打包机的全局安装：

    npm install -g webpack
    

11. 一个小型node.js express服务器安装：

    npm install webpack-dev-server -g
    

具体可参考：https://www.cnblogs.com/xuehaoyue/p/6410095.html

13. 全局安装cnpm命令（使用淘宝 NPM 镜像）：

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

14. 使用cnpm命令安装工具：

    cnpm install [name]
    

15. 实现后IP可以尝试：http://127.0.0.1:8000/

2. 实现非登录页面跳转

可参考：https://www.cnblogs.com/wisewrong/p/6277262.html

1. 修改路由，调整按钮点击事件内容
   
   可参考：https://www.cnblogs.com/toonezhr/p/10325457.html
   Notice: push(url)方法，跳转到参数URL。

2. 定义路由
   
   Notice：如果重定向会直接跳转（跳过登陆界面）。
   window.location.href的用法(动态输出跳转)

3. 添加白名单
   
   Notice：很关键，不然会原地跳转，白名单实现过滤的作用。
   可以参考：
   1、js-xss：根据白名单过滤 HTML（防止 XSS 攻击）；
   2、使用白名单安全地将HTML标签放在javascript中

4. 添加跳转链接
   
   Notice：Vue生命周期中mounted和created的区别

5. 快捷方法

   直接修改登陆按钮事件，push方法的url，点击直接跳转。