vue项目搭建流程

最新推荐文章于 2022-04-24 17:51:28 发布

众生皆苦唯有我甜

最新推荐文章于 2022-04-24 17:51:28 发布

阅读量359

点赞数 1

分类专栏：搭建vue环境文章标签： vue node

本文链接：https://blog.csdn.net/Genius_cxx/article/details/96484202

版权

搭建vue环境专栏收录该内容

6 篇文章 0 订阅

订阅专栏

** 搭建vue环境时遇到的坑，一开始采用 vue init webpack-simple appname 搭建环境，后面发现里面缺少很多东西，需要手动下载，尤其是执行 npm run build 压缩时不压缩html，小编很苦恼，最后看文档整理出如下经验，请大家多提意见**

搭建流程

一.项目初始化

1.全局安装vue-cli
    cnpm install -global vue-cli
2.初始化基于webpak的项目模版
    vue init webpack appname
        说明：
    　　　　Vue build ==> 打包方式，回车即可；
    
    　　　　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
    
    　　　　Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
    
    　　　　Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
    
    　　　　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
3.进入项目 cd vue appname
    cd vue appname
4.安装依赖
    cnpm i
5.运行项目
    npm run dev

二.项目详解

1.build：构建脚本目录
    1）build.js   ==>  生产环境构建脚本；
    
    2）check-versions.js   ==>  检查npm，node.js版本；
    
    3）utils.js   ==>  构建相关工具方法；
    
    4）vue-loader.conf.js   ==>  配置了css加载器以及编译css之后自动添加前缀；
    
    5）webpack.base.conf.js   ==>  webpack基本配置；
    
    6）webpack.dev.conf.js   ==>  webpack开发环境配置；
    
    7）webpack.prod.conf.js   ==>  webpack生产环境配置；
2.config：项目配置

　　1）dev.env.js   ==>  开发环境变量；

　　2）index.js   ==>  项目配置文件；

　　3）prod.env.js   ==>  生产环境变量；
　　
3、node_modules：npm 加载的项目依赖模块

4、src：

　 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
　  1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建
　 
    2）components：组件目录，我们写的组件就放在这个目录里面；
    3）router：前端路由，我们需要配置的路由路径写在index.js里面；

　　4）App.vue：根组件；

　　5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、README.md：项目的说明文档，markdown 格式

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

三.根据需求下载相应模块

例如：
    cnpm i axios -s

四.封装api

一.安装axios

    npm install axios; // 安装axios

二.在src目录下新建request文件夹，然后在新建http.js和一api.js。
    http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。
    
    // 在http.js中引入axios
    import axios from 'axios'; // 引入axios
    import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
    // vant的toast提示框组件，大家可根据自己的ui组件更改。
    import { Toast } from 'vant'; 
    //import { Message } from 'element-ui';//这是element-ui的提示框

三.环境切换
我们的项目环境可能有开发环境、测试环境和生产环境。
我们通过node的环境变量来匹配我们的默认的接口url前缀。
axios.defaults.baseURL可以设置axios的默认请求地址就不多说了。

// 环境的切换
    if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
    else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
    } 
    else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
    }
//设置请求超时
    axios.defaults.timeout = 10000;
//POST请求头的设置
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//请求拦截
    // 先导入vuex,因为我们要使用到里面的状态对象
    // vuex的路径根据自己的路径去写
    import store from '@/store/index';

  // 请求拦截器axios.interceptors.request.use(    
        config => {        
            // 每次发送请求之前判断vuex中是否存在token        
            // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
            // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
            const token = store.state.token;        
            token && (config.headers.Authorization = token);        
            return config;    
        },    
        error => {        
            return Promise.error(error);    
    })

响应拦截

// 响应拦截器

        axios.interceptors.response.use(    
            response => {   
                // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
                // 否则的话抛出错误
                if (response.status === 200) {            
                    return Promise.resolve(response);        
                } else {            
                    return Promise.reject(response);        
                }    
            },    
            // 服务器状态码不是2开头的的情况
            // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
            // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
            // 下面列举几个常见的操作，其他需求可自行扩展
            error => {            
                if (error.response.status) {            
                    switch (error.response.status) {                
                        // 401: 未登录
                        // 未登录则跳转登录页面，并携带当前页面的路径
                        // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                        case 401:                    
                            router.replace({                        
                                path: '/login',                        
                                query: { 
                                    redirect: router.currentRoute.fullPath 
                                }
                            });
                            break;

                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面                
                case 403:
                     Toast({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 

                // 404请求不存在
                case 404:
                    Toast({
                        message: '网络请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }    
    });

例外附上：