require引入js vue_VUE项目面试讲解

个人博客网站(三) - 前端项目​www.cnblogs.com

1.搭建VUE基础框架

1.1安装node.js

（node -v , npm -v）

1.2安装vue脚手架vue-cli

（npm install -g vue-cli）(-g表示全局安装)

1.3初始化一个项目

vue init webpack projectName（projectName 项目名称）

(vue ui)

1.4安装依赖组件

开发阶段：npm install xxx（例：安装jquery: xxx就填jquery）

发布阶段：为减小webpack打包后vendor.js的大小；我们通过cdn方式引入；比如index.html中引入:

1.5启动服务

命令：npm run dev

2.路由模块

2.1index.html

引入：

2.2webpack.base.conf.js

在module.exports = {}中最后加上

externals:{
      
  'vue': 'Vue',
  'vue-router': 'VouRouter',
  'axios': 'axios',
  'vue-resource'; 'VueResource'
}

2.3routes.js

两种引入方式：

// 普通路由引入方式（所有vue模块的js文件都打包进vendor.js和app.js中）
// import Articles from './components/Articles'
// import Topics from './components/Topics'
// import AboutMe from './components/AboutMe'
// import TimeLine from './components/TimeLine'
// import Pictures from './components/Pictures'

// 按需加载路由引入方式（各个vue模块的js文件分别打包进1.xxx.js, 1.xxx.js, 2.xxx.js......）
const Articles = r => require.ensure([], () => r(require('./components/Articles')));
const Topics = r => require.ensure([], () => r(require('./components/Topics')));
const AboutMe = r => require.ensure([], () => r(require('./components/AboutMe')));
const TimeLine = r => require.ensure([], () => r(require('./components/TimeLine')));
const Pictures = r => require.ensure([], () => r(require('./components/Pictures')));

// 构建vue-router实例（这里的VouRouter要和2.2中的名字对应）
export default new VueRouter({
      
  mode: "history",
  routes: [
    {
      path: '/',name: 'Articles',component: Articles},
    {
      path: '/topics',name: 'Topics',component: Topics},
    {
      path: '/aboutMe',name: 'AboutMe',component: AboutMe},
    {
      path: '/timeLine',name: 'TimeLine',component: TimeLine},
    {
      path: '/pictures',name: 'Pictures',component: Pictures}
  ]
})

本地开发时的服务器node,dev环境中默认配置好了。nginx服务器还需配置：nginx.conf

location / {
      
  root  html;
  index  index.html;
  if(!-e $request_filename){
      
    rewrite ^/(.*) /index.html last;
    break;
  }
}

2.4使用路由

2.4.1引入

在main.js中引入之前的routes.js(./routes这个相对路径视情况而定)：import router from './routes'

2.4.2挂载

在main.js中把路由挂载到vue实例上

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

2.4.3在app.vue中使用router-view标签：

2.4.4在pageHeader.vue 中使用导航标签做跳转

    

    

          技术文章
          随笔杂谈
          时光轴
          关于我
          图集
       
    

2.5路由跳转前的权限校验（需要在routes.js中加meta:{ requireAuth: true }）

router.beforeEach((to, from, next) => {
      
  if (to.meta.requireAuth) {
       // 该路由需要登录验证
    if (window.localStorage.getItem('token')) {
        // 进入后台
      next();
    } else {
       // 返回前台
      next({
      
        path: '/',
        query: {
       redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  } else {
       // 该路由不需要登录权限
    next();
  }
})

3.axios模块

3.1 Axios是一个基于promise的HTTP库，可以在浏览器和node.js中：

· 从浏览器中创建 XMLHttpRequests

· 支持Promise API

· 从node.js 创建 http 请求

· 拦截请求和响应

· 转换请求数据和响应数据

3.2配置axios

3.2.1 index.html: 引入

3.2.2 webpack.base.conf.js 在module.exports = {}中最后加上

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'axios': 'axios',
  'vue-resource': 'VueResource'
}

3.2.3 main.js

· 设置为 Vue 的内置对象：Vue.prototype.$axios = axios;

· 设置请求默认前缀：axios.defaults.baseURL = 'http://localhost:8080/blog/';

· 这里页可以利用上面方法设置请求的 header 信息；

getArticles: function() {
      
  var _this = this;
  this.$axios.post("article/list", {
      
    title: _this.xxx
  })
  .then(function(result) {
      
    var response = result.data;
    if (response.statusCode == "200") {
       } else {
       }
  })
}

3.4 前端后台管理对请求拦截：

在main.js 同级目录新建 http.js:

import router from '.routes'
// axios 配置
axios.defaults.timeout = 5000
axios.defaults.baseURL = process.env.BASE_API

// http request 拦截器
axios.interceptors.request.use(
  config => {
      
    if (window.localStorage.getItem('token')) {
      
       config.headers.Authorization = window.localStorage.getItem('token');
    }
    return config
  },
  err => {
      
    return Promise.reject(err)
  }
)
// http response 拦截器
axios.interceptors.response.use(
    response => {
      
        return response;
    },
    error => {
      
        if (error.response) {
      
            switch (error.response.status) {
      
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    window.localStorage.setItem('token', null)
                    router.replace({
      
                        path: '/',
                        query: {
      redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   //返回接口返回的错误信息
    }
);
export default axios

在main.js中：

import Axios from './http'
Vue.prototype.$axios = Axios;
axios.defaults.baseURL = 'http://localhost:8080/blog/';
new Vue({
      
  el: '#app',
  axios,
  router,
  components: {
       App },
  template: ''
})

到这里我们已经在前端做了“路由跳转拦截”和“后台请求拦截”

二. 项目优化

① cdn 引入，替换掉 npm install xxx

② vue懒加载，（按需加载路由方式）

③ 开启gzip打包

在config/index.js 的官方注释里说了开启gzip前要先安装 compression-webpack-plugin

所以先运行: npm install --save-dev compression-webpack-plugin

再在index.js中设置 productionGzip: ture

④ JS 和 CSS 压缩

vue 打包的 js 自带压缩功能，

⑤ 抽取 vue 中重复代码作公共模块