vue创建项目初始化及基本配置

Posted lzf-190903

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue创建项目初始化及基本配置相关的知识,希望对你有一定的参考价值。

创建新项目初始化

node_modules不需要动

public不动

src中在assets中创建css js 和img文件夹

router文件夹中的index.js只保留一个home的路由配置

App.vue只留五行代码即可

Home.vue删掉后创新的

vue的ajax插件: axios

1)安装插件(一定要在项目目录下):

>: cnpm install axios

2)在main.js中配置:

    import axios from 'axios'
    Vue.prototype.$axios = axios;

3)在任何一个组件的逻辑中发送ajax请求:

   this.$axios({
        url: 'http://127.0.0.1:8000/cars/',
        method: 'get',
    }).then(response => {
        console.log(response);
        // this.cars = response.data;
    }).catch(error => {  // 网络状态码为4xx、5xx
        console.log(error);
    });

CORS跨域问题(同源策略)

同源:http协议相同、ip服务器地址相同、app应用端口相同
跨域:协议、ip地址、应用端口有一个不同,就是跨域

Django默认是同源策略,存在跨越问题。
Django的解决方案:

1)Django按照cors模块:

>: pip install django-cors-headers

2)在settings注册模块,配置中间件:

    INSTALLED_APPS = [
        ...
        'corsheaders'
    ]
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]

3)在settings开启允许跨越:

    CORS_ORIGIN_ALLOW_ALL = True

Vue配置ElementUI

1)安装插件(一定要在项目目录下):

    >: cnpm install element-ui

2)在main.js中配置:

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

Vue配置bs环境

安装插件

jQuery

>: cnpm install jquery

vue/cli 3 配置jQuery:在vue.config.js中配置(没有,手动项目根目录下新建)

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
        }
};

BootStrap

>: cnpm install bootstrap@3

vue/cli 3 配置BootStrap:在main.js中配置

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"

以上是关于vue创建项目初始化及基本配置的主要内容,如果未能解决你的问题,请参考以下文章

初始化vue项目

Vue + ElementUI的电商管理系统实例00 创建项目及初始化

vue.config.js中的webpack配置,优化及多页面应用开发

vsCode写vue项目一键生成.vue模板

vue3.2 基础及常用方法

vue 创建项目之后,我们需要做什么?