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

目录

  • 创建新项目初始化
  • vue的ajax插件: axios
    • 1)安装插件(一定要在项目目录下):
    • 2)在main.js中配置:
    • 3)在任何一个组件的逻辑中发送ajax请求:
  • CORS跨域问题(同源策略)
  • Vue配置ElementUI
  • Vue配置bs环境
    • 安装插件

创建新项目初始化

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 [email protected]

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

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

原文地址:https://www.cnblogs.com/LZF-190903/p/12115980.html

时间: 2024-11-05 15:53:52

vue创建项目初始化及基本配置的相关文章

redis数据库-VUE创建项目

redis数据库 ''' 关系型数据库: mysql, oracle 非关系型数据库(nosql): redis,mongodb (没有表的概念) key-value mongodb: json 数据--存储在硬盘上 redis: 存在内存中 --- 速度最快 用途: --做缓存 --session数据 --游戏排行榜 --对速度要求高的数据的存储 -- 消息队列 ''' redis VS Memcached -- redis 支持五大数据类型 : 字符串| 列表| 字典 | 集合| 有序集合

vue新建项目之标准路由配置

配置路由所有用到的地方总共四步或者说四处 1.index.js(src--router--index.js) import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' import Home from '@/components/layout/Home' import showuser from '@/components/t_dom_owne

vue创建项目(推荐)

上一节我们介绍了vue搭建环境的情况,并使用一种方式搭建了一个项目,在这里为大家推荐另一种创建项目的方式. vue init webpack-simple vuedemo02 cd vuedemo02 cnpm install / npm install npm run dev 最后在浏览器输入:localhost:8000即可查看效果 原文地址:https://www.cnblogs.com/songtianfa/p/11677876.html

vue-cli3创建项目初始化

-  关于vue-cli3项目的创建,除去vue create my-project这种方式,也可以在终端里通过输入vue ui这种可视化页面的方式创建. 1.关于4个字符的缩进 可以参考下这篇博客https://www.cnblogs.com/bq-med/p/11289559.html webstorm里进行format code,format code可以选择format的范围   2.如果遇到ESLint报错:TypeError: this.CliEngine is not a cons

vue创建项目报错显示vue 和 vue-template版本不同

既然是版本不一致,那么只需要把vue与vue-template-compiler的版本更新为一致的就行了 第一种办法: 更新vue-template-compiler到与vue同版本 把vue-template-compiler卸载(cnpm uninstall vue-template-compiler), 再重新安装一个与vue版本一致的vue-template-compiler(cnpm install [email protected]报错中提示的vue-template-compile

Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理

前后端分离开发时,有时候会遇到跨域的情况:只在开发的时候存在跨域,项目上线后,由于配置的域名相同,跨域就会不存在. 这个时候,有两种方案可以比较快的解决: 1.利用h5的特性,使用cors,在ngnix服务器上设置header:Access-Control-Allow-Origin的值为 *(或者目标域名)允许跨域. 2.在我们的本地开发服务器上设置代理. 这里主要介绍使用vue-cli创建项目后,怎样配置本地服务器的代理,成功通过本地服务器代理请求数据的解决方案. 解决方案 进入config/

Nuxt 开发 - 项目初始化

Nuxt是基于Vue的一个应用框架,采用服务端渲染(SSR),可以让用户的Vue单页面应用(SPA)也可以有利于SEO. 项目初始化 参考:https://zh.nuxtjs.org/guide/installation $ npm install -g npx $ npx create-nuxt-app <项目名> 安装过程中的配置选项: ? Project name meituan-app ? Project description My neat Nuxt.js project ? Us

Node.js-Webstrom创建Vue项目(Vue项目初始化)

我犯的错误:作为vue小白,并不知道还要单独去创建初始的vue项目,于是自己在webstrom中建了一个Empty Project, 在其中新增了一个js文件,就开始import Vue from "vue"了.运行后自然就报错了:SyntaxError: Unexpected identifier,被自己蠢哭~ 下面进入正题,vue项目初始化步骤如下: 1.默认你已经安装好了Node.js.WebStrom.npm.vue/vue-cil.webpack. 2.win+R→cmd打开

前端Vue项目——初始化及导航栏

一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your cod