require引入js vue_VUE项目面试讲解
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 中重复代码作公共模块