node+vue记录

node+vue安装流程

1.安装node

2.安装cnpm（npm install -g cnpm –registry=http://registry.npm.taobao.org）

3.安装脚手架（npm install -g vue-cli）

4.vue init webpack firstVue

5.制定项目目录安装相关以来（cnpm install）

6.启动项目（npm run dev）

7.打包（npm run build），之后拿出index.html和dist就OK

---

vue集成element-ui

参考：http://www.mamicode.com/info-detail-1684308.html
webpack.conf.js的配置（即loader，参考这里）：

      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }

---

vue集成router注意routes，否则会出错

---

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'

//路由
import routes from './server/routers'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

import Axios from 'axios'

Vue.use(VueRouter);
Vue.use(ElementUI);
Vue.use(Axios)

const router = new VueRouter({
  routes
});

Vue.prototype.$axios = Axios;


const app = new Vue({
  router
}).$mount("#app");

routers.js

import Home from '../App.vue';
import Operation from '../components/Operation.vue'

export default [
    {
        path : "/operation",
        component : Operation
    },
    {
        path : '*',
        component : Home
    },
]

axios

用法（参考）：https://www.awesomes.cn/repo/mzabriskie/axios
如果要全局设置，代码：Vue.prototype.$axios = Axios;那么其他地方就可以this.$axios
例子：

this.$axios({
              method:'get',
              url:'http://localhost:8888/sbdemo/test/fAll',
          }).then((res)=>{
            this.tableData = res.data;
          }).catch((res)=>{
            alert('请求出现异常')
          })

---

获取url地址栏参数：this.$route.query.X

route：路由，获取参数等操作
router：路由器，跳转（router.push）

---

：属性=“”，可以直接和data里面的值进行绑定
属性=“”，需要{{data里的值}}这样的形式