11、vue3项目开发前的准备工作

vue3项目开发的准备工作

一、安装环境

1、安装node

2、安装cnpm或者配置淘宝镜像源

3、安装vue脚手架

4、安装开发工具

5、安装git或者svn

6、安装postman

二、使用vue脚手架创建项目

1、使用vue-cli创建项目

如：vue create 项目名称

2、使用可视化工具创建项目

如：在终端输入vue ui进入可视化工具

三、安装项目中所需要的插件并且进行相关配置

1、安装axios

npm install axios --save //安装

2、安装ui组件element-ui

npm install element-ui --save

3、安装可视化图形组件echarts

npm install echarts -S

4、等等…

四、配置跨域—在vue.config.js配置文件进行配置

如果项目存在跨域需要在vue.config.js文件中进行一些基础配置,配置后需要重启项目

const path = require('path');
module.exports = {
    // 基本路径
    publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
    // 输出文件目录
    outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false,
    /**
     * webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
     **/
    chainWebpack: (config) => {
        const svgRule = config.module.rule("svg");
        svgRule.uses.clear();
        svgRule
            .use("svg-sprite-loader")
            .loader("svg-sprite-loader")
            .options({
                symbolId: "icon-[name]",
                include: ["./src/icons"]
            });

    },
    configureWebpack: (config) => {
        config.resolve = { // 配置解析别名
            extensions: ['.js', '.json', '.vue'], //自动添加文件后缀名
            alias: {
                '@': path.resolve(__dirname, './src'),
                '@c': path.resolve(__dirname, './src/components'),
            }
        }
    },
    //修改或新增html-webpack-plugin的值，在index.html里面能读取htmlWebpackPlugin.options.title----设置网页的title
    chainWebpack: config =>{
        config.plugin('html')
            .tap(args => {
                args[0].title = "练习dome项目";
                return args;
            })
    },
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
            // 如发现 css.modules 报错，请查看这里：http://www.web-jshtml.cn/#/detailed?id=12
            sass: {
                // additionalData: `@import "~@/variables.sass"`
                // additionalData: `@import "~@/styles/home.sass"`
            }
        },
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    /**
     *  PWA 插件相关配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
     */
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
        open: true, // 编译完成是否打开网页
        host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
        port: 8080, // 访问端口
        https: false, // 编译失败时刷新页面
        hot: true, // 开启热加载
        hotOnly: false,
        proxy: {
            [process.env.VUE_APP_API]: {
                /* 目标代理服务器地址 */
                target: `http://www.web-jshtml.cn/productapi/token`,
                // target: `http://192.168.1.187:8080`,
                /* 允许跨域 */
                changeOrigin: true,
                pathRewrite: {
                    [`^${process.env.VUE_APP_API}`]: '',
                },
            },
        }, // 设置代理
        overlay: { // 全屏模式下是否显示脚本错误
            warnings: true,
            errors: true
        },
        before: app => {}
    },
    /**
     * 第三方插件配置
     */
    pluginOptions: {}
}

五、封装项目的API接口

封装axios的请求配置

在src目录下的utils目录下创建request.js

（1）对axios进行配置

1.引入axios

2.创建axios的实例

3.配置请求拦截

4.配置相应拦截

5.导出axios实例

axios配置js代码

import axios from 'axios'
import { Message } from 'element-ui'
const BASEURL = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API : process.env.VUE_APP_API
const requestTimeout=1000*60*3
//创建axios实例并且赋值给service
const service = axios.create({
    baseURL: BASEURL,
    // 单位ms
    timeout: requestTimeout,
})
//axiso文档中的拦截器部分代码(http://www.axios-js.com/zh-cn/docs/)


// 添加请求拦截器(一般在请求头里面加token等)
service.interceptors.request.use(
    config => {
        // config.headers['Tokey'] = getToken()
        // config.headers['UserName'] = getUsername()
        // 在发送请求之前做些什么
        return config
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error)
    }
)

// 添加响应拦截器
service.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        let data = response.data
        if (data.code !== '0') {
            Message.error(data.msg)
            return Promise.reject(data)
        } else {
            return response
        }
    },
    error => {
        // 对响应错误做点什么
        return Promise.reject(error)
    }
)
//导出实例
export default service

（2）封装API接口

1.可以把所有接口放到同一个js文件

2.安装模块的方式去对接口进行划分与对应封装

3.在组件内测试接口是否调用成功

六、配置页面路由

七、开发主页面

八、顺道来讲讲Vue2与Vue3的某些区别

1、Vue 3 的 Template 支持多个根标签，Vue 2 不支持

2、Vue的每个应用实例是通过createApp()函数创建，而Vue2是new Vue()

3、Vue3与Vue2配置文件的区别

3.1、vue-cli3是基于webpack4打造，vue-cli2是基于webpack3

3.2、vue-cli3的设计原则是“0配置”，移除（隐藏）配置文件build和config等目录

3.3、vue-cli3提供了vue ui 命令，提供了可视化配置

3.4、vue-cli3移除了static文件夹，新增了public文件夹，并且将index.html移动到public中，而Vue2是放在config文件下

3.5、使用vue-cli3初始化项目 vue create 文件名，生成的目录

vue-cli3隐藏了配置文件，为了方便修改配置文件，我们可以创建一个文件夹，命名叫vue.config.js，放根目录下面，

Vue3配置文件目录，具体配置看目录四

Vue2配置文件目录下

Vue2与Vue3的开发使用区别先讲到这啦~~~