vue脚手架搭建以及常见问题（附解决方案）

vue脚手架搭建以及常见问题（附解决方案）

node.js安装后

1.全局安装vue-cli

npm install -g @vue/cli

2.生成项目名为projectName的模​​​​​​模板

vue init webpack projectName 

3.安装依赖

npm install

4.运行

npm run dev 

5.路由

npm install vue-router --save-dev

6.http

npm install vue-resource --save-dev

7.创建路由文件

7.1  在src下新建routes.js文件

import AddBlog from './components/AddBlog';
import ShowBlogs from './components/ShowBlogs'
export default [{
        path: "/",
        component: ShowBlogs
    },
    {
        path: "/add",
        component: AddBlog
    }
]

7.2  在main.js中创建路由

//引入routes.js
import Routes from './routes'

.
.
.

const router = new VueRouter({
    routes: Routes,
    mode: "history" //去掉地址栏的#
})

.
.
.

new Vue({
    el: '#app',
    components: { App },
    template: '<App/>',
    router: router
})

8.自定义指令

8.1  全局自定义指令

在main.js里面

Vue.directive('rainbow', {
    bind(el, binding, vnode) {
        el.style.color = "#" + Math.random().toString(16).slice(2, 8);
    }
})

8.2  局部自定义指令

当前页面

  directives: {
    "rainbow": {
      bind(el, binding, vnode) {
        el.style.color ="#" +Math.random().toString(16).slice(2, 8);
      }
    }
  }

9.自定义过滤器

9.1  全局自定义过滤器

在main.js里面

Vue.filter("toUpperCase",function(value){
    return value.toUpperCase();
})

9.2  局部自定义过滤器

当前页面

  filters: {
    // "toUpperCase": (value) => {//方法1
    //   return value.toUpperCase();
    // },
    toUpperCase(value) {//方法2
      return value.toUpperCase();
    }
  },

10.router-link自有类router-link-exact-active、router-link-active

修改.router-link-active中的样式，再在router-link后面加上exact就可以给当前路由页面加上active

11.axios

npm install axios --save

在main.js中

import axios from 'axios'

//全局配置axios
Vue.prototype.$axios = axios;
axios.defaults.baseURL = "http://jsonplaceholder.typicode.com/";
axios.defaults.headers.common['Authorization'] = "wsl";
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//使用
// this.$axios("/post/", {}).then(datas => {
//   console.log(datas);
// });

12.proxyTable

打开config——index.js——proxyTable

proxyTable: {
    '/apis': {
        // 测试环境
        target: 'http://www.thenewstep.cn/', // 接口域名
        changeOrigin: true, //是否跨域
        pathRewrite: {
            '^/apis': '' //需要rewrite重写的,
        }
    }
},

//使用方法
// this.$axios.post("/apis/test/testToken.php", {
//   username: "aaa",
//   password: "123456"
// }).then(datas=>{
//   console.log(datas)
// });

//在main.js加上token
// axios.defaults.headers.common["token"] = "fe4c902c9ae5a2a9d8f84868ad064e706"