vue proceso de construcción y desarrollo del proyecto vue configuración del proyecto ElementUI, jQuery y entorno Bootstrap, problemas entre dominios

Others 2020-04-16 12:08:53 views: null

Directorio

1. Construcción del proyecto VUE

  • Pasos:
1.环境搭建——》2.创建项目并启动项目——》

1. Construcción del entorno

  • Hay 3 pasos
# 1. 安装node
去官网下载安装包，直接安装（官网：https://nodejs.org/zh-cn/）

2. 安装cnpm


到command终端中，输入下面命令即可

npm install -g cnpm --registry=https://registry.npm.taobao.org


3. 安装脚手架


到command终端中，输入下面命令即可

cnpm install -g @vue/cli


清空缓存 （当前面的安装过程出错时，要先清空缓存，再重新安装）


到command终端中，输入下面命令即可

npm cache clean --force

2. Creación y puesta en marcha del proyecto.

  • Nota: Para crear un proyecto vue, es más apropiado usar una creación imperativa desde la terminal, no un editor
# 1. 在command终端中，先切换到项目要创建的路径下

2. 创建项目


vue create 项目名


在上面的第2步中，输入创建命令后还有一些配置，按照下面的图片操作即可（其中键盘上的上下方向键来选择选项，空格来确定选择）


3. 启动项目


启动项目之前，一定要切换到项目根目录下，使用终端启动时，输入下面的命令

npm run serve  # ********一定要注意是serve ，最后没有r

  • La captura de pantalla de configuración del segundo paso
  • Figura 1:

  • Figura 2:

  • Figura 3:

  • Figura 4:

  • Figura 5:

2. Proyecto de desarrollo

  • Después de la creación exitosa del proyecto vue, se ha creado el marco básico del proyecto. Solo necesitamos abrir el proyecto con un IDE (Entorno de desarrollo integrado) para el desarrollo del proyecto. Aquí usamos pycharm para desarrollar el proyecto vue.

1. Configurar la función de inicio del proyecto vue

  • Use pycharm para desarrollar el proyecto vue, aquí queremos configurar la función de inicio del proyecto, como se muestra a continuación.

  • Figura 1:

  • Figura 2:

  • Figura 3:

  • Figura 4:

2. Desarrollar vue proyecto

(1) El rol de los archivos del proyecto

  1. node_modules: dependencias del proyecto (se deben reconstruir diferentes dependencias de la computadora), no nos importa

  2. public: la página donde se almacena el proyecto (debido a que vue framework es un desarrollo de una sola página, por lo que solo contiene una página predeterminada de índice), no es necesario que

  3. src: almacena archivos relacionados con el proyecto en sí. Desarrollamos principalmente en esta carpeta.

    • activos: almacene los archivos estáticos del proyecto (como css, js y otros complementos de módulos importados)

    • componentes: almacene los componentes pequeños del proyecto (la relación entre los componentes en la carpeta de vistas es el componente hijo-padre, y los parámetros se pasan a través del método hijo-padre o padre-hijo).

    • enrutador: almacena la configuración de enrutamiento del proyecto (correspondencia entre el enrutamiento y los componentes de la página)

    • vistas: almacene los componentes de la página del proyecto (los parámetros entre los componentes y los componentes se pasan a través del método de parámetros de enrutamiento)

    • Archivo App.vue: el componente raíz del proyecto, fijo internamente 5 líneas de código. (Los componentes de la página que personalizamos en las vistas finalmente se <router-view />reemplazan por el componente raíz para la representación)

      • <!--App.vue的5行代码-->

        <template>
        
<div id="app">
        
<router-view/>  <!--完成页面组件的占位-->
        
</div>
        
</template>

    • main.js: el archivo de script total del proyecto (configurar todos los entornos, cargar componentes raíz) (los entornos de tipo global se configuran en el archivo de cambio)

      • *****对于导入文件，使用import和require都可，一般媒体文件用require来导入，而import和from联用，可以起别名。*****

        *****Vue.prototype.属性和Vue.use()功能相同，都是配置全局环境是使用的，Vue.prototype一般用来定义属性，在全局组件中用this可以访问到，Vue.use()一般用来配置是方法，直接在全局使用use括号内的方法名字即可。
        

        // 1. 在main.js文件中配置全局js
        
import settings from '@/assets/js/settings'  // settings文件是assets文件夹下的
        
Vue.prototype.$settings = settings;
        

        // 2. 在main.js文件中配置全局css
        

        require('@/assets/css/global.css');  // global.css文件是assets文件夹下
        

        // 在main.js文件中配置全局element-ui环境
        

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

(2) Proceso de desarrollo del proyecto Vue

# 1. 在views文件夹中，创建页面组件

2. 在router的index.js中配置页面组件的路由


3. 继续书写创建的页面组件，如果包含小组件，则需要在页面组件下方导入并挂载，数据通过vue组件的生命周期钩子来获取后端响应的数据

(3) Solicitar ciclo de vida del proyecto vue

  • El navegador envía una solicitud a la URL del proyecto vue- "
  • El complemento del enrutador carga los componentes de página correspondientes a través de mapeo- "
  • El componente de página envía una solicitud ajax a la URL del backend y obtiene los datos de respuesta: "
  • El componente de página reemplaza el <router-view />marcador de posición en el archivo App.vue- "
  • App.vue finalmente muestra todas las plantillas y datos en el punto de montaje del componente raíz de index.html en la carpeta pública- "
  • El navegador muestra la página index.html.

3. Funciones en el proyecto vue

1. Enrutamiento de etiquetas y métodos relacionados

标签：
<!-- 该标签完成页面组件的占位 -->
<router-view></router-view>   
<!--该标签可以写成单标签。组件标签也可以写成单标签-->

<!-- 该标签完成路由跳转 -->

<router-link></router-link>


方法：

<!-- 该方法完成逻辑中的路由跳转 -->

$router.push('页面组件路由')


<!-- 该方法完成路由前进后退的步数，可以为负数 -->

$router.go(整数)

2. Configuración de enrutamiento

  • Después de crear el componente de página, la ruta del componente de página debe configurarse en el archivo index.js en la carpeta del enrutador

  • La configuración de enrutamiento del proyecto vue nos permite configurar múltiples URL para un componente de página (a través del método de redireccionamiento)

(1) Método de configuración de enrutamiento sin parámetros de enrutamiento

// 加入现在有一个新创建的页面组件 Home.vue

// 在router文件夹的index.js中


  
  
    

   
   
  1. 

    先导入页面组件
    
import 组件别名 from '..views/Home.vue'
    

    2. 

   
   
  2. 

    书写页面路由（在const routes中添加新路由）
    

    3. 

  
  


// 下面的两种配置都可以访问Home.vue页面组件


// 1. 正常配置

{

path: '/home',

name: 'home',

component: Home

},

// 2. 重定向配置

{

path: '/index',

redirect:'/home'

},

(2) Método de configuración de enrutamiento de parámetros de enrutamiento

  • Es solo que hay una diferencia en la forma de escribir el valor de la ruta cuando no hay un parámetro de enrutamiento, el otro no cambia
  • Hay dos formas de enrutar parámetros
  • Método 1:
// 方式一：拼接式参数
1.标签跳转携带参数：
to="/user?pk=1" ，pk是键值对的key

2.对应逻辑跳转携带参数：

this.$router.push('/user?pk=1')


3.对应的页面路由书写方式：

path: '/user'


// 方式一对应的取值方式：

this.$route.query.pk

  • Método 2:
// 方式二：有名分组式参数

1.标签跳转携带参数：

to="/user/1"


2.对应逻辑跳转携带参数：

this.$router.push('/user/1')


3.对应页面路由书写方式：这里与无路由传参的路由书写方式有区别***

path: '/user/:pk'


// 方式二对应的取值方式：

this.$route.params.pk

3. Función de salto de página

  • Hay dos formas:
    • Salto de etiqueta
    • Salto lógico (es decir, salto de ruta)

(1) Salto de etiqueta

<router-link to="页面路由">用户页</router-link>  <!-- 使用router-link标签，完成标签跳转-->

<!-- router-link 标签渲染到浏览器中就是一个a标签-->

(2) Salto lógico (salto de ruta)

this.$router.push('页面路由')  // 完成逻辑跳转，主要是在事件中完成跳转

4. Pequeños puntos de conocimiento en los componentes del proyecto.

(1) Estilo de componente

// 组件中，内部书写的style标签中，要有scoped属性，表示让当前组件中的样式使用本组件style中定义的样式，这样的话，之后即使与全局样式重名，也没关系。
<style scoped>
	样式代码
</style>

(2) vue proyecto front-end y django back-end

Para que el proyecto vue solicite la url del backend de django, debe escribir la ruta absoluta de la función de vista de django.

Cuatro, prototipo JS

// 利用JS原型，在vue项目中，我们可以产生一个可以在全局的vue实例都生效的属性。

// 定义方式：

// 在vue项目的main.js文件中：


Vue.prototype.属性名 = 属性值（或变量）;  // 这样就可以在vue项目的任意vue实例的中都可以访问到

Cinco ganchos de ciclo de vida de componentes vue

  • El enlace del ciclo de vida del componente es: el método de devolución de llamada correspondiente al nodo de tiempo especial en todo el ciclo de vida del componente desde la creación hasta la destrucción

  • Ganchos comunes del ciclo de vida

beforeCreate(){}  // 组件要创建之前

created(){}  // 组件创建成功  向后台发送数据请求，一般是加载快、比较小的数据


beforeMount(){}  // 组件要加载之前


mounted(){}  // 组件加载完成  特别耗时的数据请求，可以延后到组件初步加载成功后，再慢慢请求


beforeUpdate(){}  // 项目中任意变量要变化之前


updated(){}  // 项目中任意变量刚变化之后


beforeDestroyed(){}  // 组件要销毁之前


destoryed(){}  // 组件销毁完成

Seis, el complemento ajax de vue: axios

// 配置步骤：

  
  
    

   
   
  1. 安装插件：在项目根目录下（一定要在项目目录下），输入命令安装插件
    2. 

  
  


cnpm install axios


  
  
    

   
   
  1. 在项目的main.js中配置
    2. 

  
  


import axios from 'axios'

Vue.prototype.$axios = axios;  // 利用JS原型，在全部的组件中都可以访问到axios插件


  
  
    

   
   
  1. 在一个组件的逻辑中发送ajax请求实例
    2. 

  
  


this.$axios({

url: 'http://127.0.0.1:8000/cars/',  // 后端url

method: 'get',  // 请求方式

}).then(response => {  // 回调函数，一定要用箭头函数

console.log(response);

// this.cars = response.data;

}).catch(error => {  // 捕捉错误，网络状态码为4xx、5xx

console.log(error);

});

7. La implementación CORS del proyecto vue + django

1. ¿Por qué hay problemas entre dominios?

  • Misma fuente: mismo protocolo http, misma dirección de servidor ip, mismo puerto de aplicación de aplicación

  • Dominio cruzado: dominio cruzado siempre que haya una diferencia en el protocolo, la dirección IP y el puerto de la aplicación

  • Los problemas entre dominios se producen principalmente en proyectos en los que los extremos frontal y posterior están separados. Debido a que el navegador y django son la estrategia del mismo origen, existe un problema de dominio cruzado. Es decir, tanto el navegador como el backend de django solo solicitarán y responderán a recursos en el mismo dominio.

  • En el proyecto vue,

    • El navegador solicita la dirección de enlace del proyecto vue, - "
    • La dirección de enlace corresponde al componente vue y luego accede a la dirección de enlace correspondiente al extremo posterior-
    • Los datos de respuesta de la dirección del enlace de fondo se devuelven a la función de devolución de llamada del proyecto vue, y hay un problema de dominio cruzado

2. Método de Django para resolver el problema de cors

# 步骤：

djan项目中：


1. django 安装cors模块：


pip install django-cors-headers


2. 在settings配置（注册app，注册中间件）


INSTALLED_APPS = [


    'corsheaders'
]



MIDDLEWARE = [


    'corsheaders.middleware.CorsMiddleware'
]



3. 在settings开启允许所有的跨域


CORS_ORIGIN_ALLOW_ALL = True

Ocho, vue colocación ElementUI

  • ElementUI es un módulo de terceros de código abierto que tiene hambre. Su función es la misma que Bootstrap. Debido a que todo está desarrollado por el marco vue, ElementUI se adapta perfectamente al proyecto vue
  • Pasos para configurar ElementUI
1. 安装插件（一定要在vue项目目录下），代替Bootstrap的下载到本地操作
cnpm install element-ui

 
 
    
  
  

  1. 

    在main.js中配置
    
import ElementUI from 'element-ui';
    
import 'element-ui/lib/theme-chalk/index.css';
    
Vue.use(ElementUI);
    

    2. 

  2. 

    使用
    
直接复制粘贴到组件的模板中即可
    

    3.

Nueve, configuración vue jQuery y entorno Bootstrap

1. Configure el entorno jQuery

1. 安装jQuery
cnpm install jQuery

  
  
    

   
   
  1. 

    vue项目在配置jQuery环境时，需要在vue.config.js文件中配置，如果vue项目没有该文件，则在vue项目根目录下手动创建
    

    2. 

   
   
  2. 

    vue.config.js文件中书写
    

    3. 

  
  


const webpack = require("webpack");


module.exports = {

configureWebpack: {

plugins: [

new webpack.ProvidePlugin({

$: "jquery",  // $ 表示的就是jQuery中的$

jQuery: "jquery",

"window.jQuery": "jquery",

Popper: ["popper.js", "default"]

})

]

}

};

2. Configure el entorno Bootstrap

1. 安装Bootstrap

cnpm install bootstrap@3  // @3表示版本号，在终端中给python解释器安装则是 pip install bootstrap==3 ，3默认是3点几版本中最稳定的那个版本


  
  
    

   
   
  1. main.js文件中配置
    2. 

  
  


import "bootstrap"

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

Supongo que te gusta

Origin www.cnblogs.com/sq1995liu/p/12711702.html
Recomendado
Clasificación
Diario
Más
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)

Code World

© 2018 codetd.com