vueプロジェクトの構築と開発プロセスvueプロジェクトの構成ElementUI、jQueryおよびBootstrap環境、クロスドメインの問題

その他 2020-04-16 12:08:39 訪問数: null

ディレクトリ

1. VUEプロジェクトの構築

  • 手順：
1.环境搭建——》2.创建项目并启动项目——》

1.環境構築

  • 3つのステップがあります
# 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.プロジェクトの作成と起動

  • 注：Vueプロジェクトを作成するには、エディターではなくターミナルから命令型作成を使用するのが最も適切です。
# 1. 在command终端中，先切换到项目要创建的路径下

2. 创建项目


vue create 项目名


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


3. 启动项目


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

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

  • 2番目のステップの構成のスクリーンショット
  • 図1：

  • 図2：

  • 図3：

  • 図4：

  • 図5：

2.開発プロジェクト

  • vueプロジェクトの作成が成功した後、基本的なプロジェクトフレームワークが構築されました。プロジェクトを開発するには、IDE（統合開発環境）でプロジェクトを開くだけです。ここでは、pycharmを使用してvueプロジェクトを開発しています。

1. vueプロジェクトの開始機能を構成する

  • pycharmを使用してvueプロジェクトを開発します。ここでは、以下に示すように、プロジェクト開始関数を構成します。

  • 図1：

  • 図2：

  • 図3：

  • 図4：

2. Vueプロジェクトを開発する

（1）プロジェクトファイルの役割

  1. node_modules：プロジェクトの依存関係（異なるコンピューターの依存関係を再構築する必要があります）、私たちは気にしません

  2. public：プロジェクトが保存されているページ（vueフレームワークは単一ページの開発であるため、インデックスのデフォルトページのみが含まれているため）、移動する必要はありません

  3. src：プロジェクト自体に関連するファイルを保存します。主にこのフォルダで展開しています。

    • アセット：プロジェクトの静的ファイル（インポートされたcss、js、その他のモジュールプラグインなど）を保存します

    • コンポーネント：プロジェクトの小さなコンポーネントを格納します（viewsフォルダー内のコンポーネント間の関係は子親コンポーネントであり、パラメーターは子親または親子メソッドを介して渡されます）。

    • ルーター：プロジェクトのルーティング構成を格納します（ルーティングコンポーネントとページコンポーネントの対応）

    • ビュー：プロジェクトのページコンポーネントを格納します（コンポーネントとコンポーネント間のパラメーターは、ルーティングパラメーターのメソッドを介して渡されます）

    • App.vueファイル：プロジェクトのルートコンポーネント。内部的に修正された5行のコード。（ビューでカスタマイズしたページコンポーネントは、最終的<router-view />にはレンダリング用のルートコンポーネントに置き換えられます）

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

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

    • main.js：プロジェクトの合計スクリプトファイル（すべての環境を構成し、ルートコンポーネントをロードします）（グローバルタイプの環境は変更ファイルで構成されます）

      • *****对于导入文件，使用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）Vueプロジェクト開発プロセス

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

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


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

（3）vueプロジェクトのライフサイクルのリクエスト

  • ブラウザは、vueプロジェクトのURLにリクエストを送信します-」
  • ルータープラグインは、マッピングを通じて対応するページコンポーネントをロードします
  • ページコンポーネントはajaxリクエストをバックエンドURLに送信し、応答データを取得します-"
  • ページコンポーネントは<router-view />、App.vueファイルのプレースホルダーを置き換えます- "
  • App.vueは最後に、すべてのテンプレートとデータをパブリックフォルダー内のindex.htmlのルートコンポーネントのマウントポイントにレンダリングします-"
  • ブラウザにindex.htmlページが表示されます

3. vueプロジェクトの機能

1.ルーティング関連のラベルとメソッド

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

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

<router-link></router-link>


方法：

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

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


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

$router.go(整数)

2.ルーティング構成

  • ページコンポーネントの作成後、ルーターコンポーネントのindex.jsファイルでページコンポーネントのルートを構成する必要があります

  • vueプロジェクトのルーティング構成により、（リダイレクトメソッドを使用して）ページコンポーネントに複数のURLを構成できます

（1）ルーティングパラメータなしのルーティング設定方法

// 加入现在有一个新创建的页面组件 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）ルーティングパラメータのルーティング設定方法

  • ルーティングパラメータがない場合のパス値の記述方法に違いがあるだけで、その他は変更されません
  • ルーティングパラメータには2つの方法があります
  • 方法1：
// 方式一：拼接式参数
1.标签跳转携带参数：
to="/user?pk=1" ，pk是键值对的key

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

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


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

path: '/user'


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

this.$route.query.pk

  • 方法2：
// 方式二：有名分组式参数

1.标签跳转携带参数：

to="/user/1"


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

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


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

path: '/user/:pk'


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

this.$route.params.pk

3.ページジャンプ機能

  • 2つの方法があります。
    • ラベルジャンプ
    • 論理ジャンプ（つまり、ルーティングジャンプ）

（1）ラベルジャンプ

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

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

（2）ロジックジャンプ（ルートジャンプ）

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

4.プロジェクトコンポーネントの小さな知識ポイント

（1）コンポーネントのスタイル

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

（2）vueフロントエンドプロジェクトとdjangoバックエンド

VueプロジェクトがdjangoバックエンドからURLをリクエストするには、djangoビュー関数の絶対パスを記述する必要があります。

4、JSプロトタイプ

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

// 定义方式：

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


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

5つ、vueコンポーネントのライフサイクルフック

  • コンポーネントのライフサイクルフックは、作成から破棄までのコンポーネントのライフサイクル全体における特別な時間ノードに対応するコールバックメソッドです。

  • 一般的なライフサイクルフック

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

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


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


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


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


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


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


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

6、vueのajaxプラグイン：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. vue + djangoプロジェクトのCORS実装

1.クロスドメインの問題があるのはなぜですか

  • 同じソース：同じhttpプロトコル、同じIPサーバーアドレス、同じアプリアプリケーションポート

  • クロスドメイン：プロトコル、IPアドレス、アプリケーションポートに違いがある限り、クロスドメイン

  • クロスドメインの問題は、主にフロントエンドとバックエンドが分離されているプロジェクトで発生します。ブラウザとdjangoはどちらも同じ生成元の戦略であるため、クロスドメインの問題があります。つまり、ブラウザとdjangoバックエンドの両方が同じドメイン内のリソースのみを要求して応答します。

  • Vueプロジェクトでは、

    • ブラウザは、vueプロジェクトのリンクアドレスを要求します-」
    • リンクアドレスはvueコンポーネントに対応し、バックエンドに対応するリンクアドレスにアクセスします-"
    • バックエンドリンクアドレスの応答データがVueプロジェクトのコールバック関数に返され、クロスドメインの問題があります

2. Djangoの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

八、 vue配置ElementUI

  • ElementUIは、空腹なオープンソースのサードパーティモジュールです。その機能はBootstrapと同じです。すべてがvueフレームワークによって開発されているため、ElementUIはvueプロジェクトに完全に適合しています。
  • 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.

9つのvue構成jQueryおよびBootstrap環境

1. 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.ブートストラップ環境を構成する

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"

おすすめ

転載: www.cnblogs.com/sq1995liu/p/12711702.html
おすすめ
TIOBE 5 月リスト: Fortran がトップ 10 に「復活」
GCC 14.1 发布
ランキング
Linuxの一般的なコマンドの緊急対応
FPGAの設計者は、5つの基本的なスキルです
Javaの研究では、2019年6月12日ノート
Golang底层原理剖析之内存逃逸
VIM - Viは、プログラマーのテキストエディタを改善しました
魔法書（MagicTable）入門チュートリアルは、CADの一括転送複数のテーブルExcelをExcelを回し--CAD
mockitoとの望ましくないモック
EVE-NG MPLS L2VPN BGP pw -- スタティック ルート、スタティック mpls lsp
抵抗性タッチスクリーンドライバ（II）
PHP 安装扩展 Api Version 和扩展extensions路径不匹配的问题
アーカイブ
もっと
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)

コードワールド

© 2018 codetd.com