Vue相关

Vue.js 是一套构建用户界面的渐进式框架。采用自底向上增量开发的设计。

一直在用vue 脚手架把玩项目。

记录下流程：
①部署node环境，安装node.js
②安装cnpm淘宝镜像，
npm install -g cnpm --registry=https://registry.npm.taobao.org
③安装vue-cli脚手架模版
cnpm install -g vue-cli
④全局安装 webpack
cnpm install webpack -g
⑤创建vue项目
vue init webpack mydemo（mydemo项目名称）
⑥安装依赖
cd mydemo
cnpm install
npm run dev
当当当当，一个崭新的vue项目完成
会自动打开浏览器，默认端口号：8080
可以自行在config/index.js中修改端口号。
⑦编译
npm run build
自动生成一个dist文件夹。包含一个static 和index.html
⑧nginx部署
下载 nginx
解压 文件，编辑nginx/conf 下的nginx.conf

nginx

启动nginx ，直接双击 nginx.exe
浏览器输入 http://127.0.0.1:8080/ 或者 http://localhost:8080

完美运行

• 如何解决history 模式下 刷新页面404问题

     location / {
            root   D:\site\webpos;    //项目路径
            try_files $uri $uri/ /index.html;
        }

---

使用express搭建静态服务

mock数据写在json文件中，proxyTable 里将接口代理到具体mock数据json文件上。
具体方法：

创建 mock 文件夹
build/dev-server.js 中添加如下代码

image.png

---

Vue 生命周期

生命周期 image.png

为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。例如：

---

v-if & v-show区别
v-if 插入or删除。
一般来说，v-if有更高的切换消耗。v-show有更多的初始化渲染消耗。
因此对需要频繁切换而对安全性无要求，使用v-show
如果在运行时，条件不可能改变使用 v-if

[v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
Vue 中的 v-cloak 解读

"active-class" 属 性

这个属性是设置激活链接时class属性，也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性

<router-link :to="/home" active-class="u-link--Active">Home</router-link>
active-class属性的默认值是router-link-active,所以如果没有设置，就会被渲染为这个class

可以在router.js里面设置
const router = new VueRouter({
mode: 'hash',
linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})

路由中常常会携带参数。http://xxx,com/detail?id=2
对于参数唯一的，
<a v-link="{path:'/detail/001'}">新闻001</a>
<a v-link="{path:'/detail/002'}">新闻002</a> //跳转链接后面带参数

   {
      path: '/detail/:id',
      name: 'detail',
      component: Detail,
    },

获取参数方法let id = $route.params.id
优化后 http://xxx,com/detail/2

---

参考资料
element
react.js,angular.js,vue.js学习哪个好？
新手向：Vue 2.0 的建议学习顺序
React还是Vue：你该如何选择？
windows下vue+webpack前端开发环境搭建及nginx部署