vue項目搭建和開發流程 vue項目配置ElementUI、jQuery和Bootstrap環境、跨域問題

時間  2020-05-10
標籤 vue 項目 搭建 開發 流程 配置 elementui jquery bootstrap 環境 問題 欄目 JQuery 简体版
原文   原文鏈接

[TOC]css

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、 開發項目

  • 在vue項目建立成功後，基本的項目框架已經搭建好了。咱們只須要用一個IDE（集成開發環境）打開項目就能夠進行項目開發了。這裏咱們用pycharm來開發vue項目。

1. 配置vue項目啓動功能

  • 使用pycharm開發vue項目，這裏咱們要配置項目啓動的功能，以下圖。html

  • 圖一：前端

  • 圖二：

  • 圖三：

  • 圖四：

2. 開發vue項目

（1）項目文件的做用

  1. node_modules : 項目的依賴（不一樣電腦依賴須要從新構建），咱們不用管vue

  2. public : 存放項目的頁面（由於vue框架是單頁面開發，因此只含有一個index默認的頁面），咱們也不用動node

  3. src : 存放與項目自己相關的文件 。咱們主要是在這個文件夾中開發。python

    • assets：存放項目的靜態文件（如導入的css，js等模塊插件）jquery

    • components：存放項目的小組件（與views文件夾中的組件是子父組件的關係，傳參經過子傳父或父傳子的方式傳參。）webpack

    • router：存放項目的路由配置（路由與頁面組件對應關係）ios

    • views：存放項目的頁面組件（其中的組件與組件之間的傳參經過路由傳參的方法傳參）web

    • App.vue文件：項目的根組件，內部固定5行代碼。（咱們在views中自定義的頁面組件最後都是將根組件的<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發送請求——》
  • router插件經過映射加載對應的頁面組件——》
  • 頁面組件向後端url發送ajax請求，拿到響應數據——》
  • 頁面組件替換App.vue文件中的<router-view />佔位符——》
  • App.vue最後把全部的模板和數據渲染到public文件夾中的index.html的根組件掛載點中——》
  • 瀏覽器進行對index.html頁面的展現

3、vue項目中的功能

1. 路由相關的標籤和方法

標籤：
<!-- 該標籤完成頁面組件的佔位 -->
<router-view></router-view>   
<!--該標籤能夠寫成單標籤。組件標籤也能夠寫成單標籤-->


<!-- 該標籤完成路由跳轉 -->
<router-link></router-link>


方法：
<!-- 該方法完成邏輯中的路由跳轉 -->
$router.push('頁面組件路由')

<!-- 該方法完成路由前進後退的步數，能夠爲負數 -->
$router.go(整數)

2. 路由配置

  • 在頁面組件建立完成後，就要取router文件夾的index.js文件中配置頁面組件的路由

  • vue項目的路由配置容許咱們能夠對一個頁面組件配置多個url（經過重定向的方法）

（1）無路由傳參的路由配置方法

// 加入如今有一個新建立的頁面組件 Home.vue

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

1. 先導入頁面組件
import 組件別名 from '..views/Home.vue'

2. 書寫頁面路由（在const routes中添加新路由）

// 下面的兩種配置均可以訪問Home.vue頁面組件

// 1. 正常配置
  {
    path: '/home',
    name: 'home',
    component: Home
  },
// 2. 重定向配置      
  {
    path: '/index',
    redirect:'/home'
  },

（2）路由傳參的路由配置方法

  • 只是與無路由傳參時的 path 的值寫法有差別，其餘不變
  • 有兩種路由傳參的方式
  • 方式一：
// 方式一：拼接式參數
1.標籤跳轉攜帶參數：
to="/user?pk=1" ，pk是鍵值對的key

2.對應邏輯跳轉攜帶參數：
this.$router.push('/user?pk=1')

3.對應的頁面路由書寫方式：
path: '/user'

// 方式一對應的取值方式：
this.$route.query.pk
  • 方式二：
// 方式二：有名分組式參數

1.標籤跳轉攜帶參數：
to="/user/1"

2.對應邏輯跳轉攜帶參數：
this.$router.push('/user/1')

3.對應頁面路由書寫方式：*****這裏與無路由傳參的路由書寫方式有區別********
path: '/user/:pk' 

// 方式二對應的取值方式：
this.$route.params.pk

3. 頁面的跳轉功能

  • 共有兩種方式：
    • 標籤跳轉
    • 邏輯跳轉（即路由跳轉）

（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. 安裝插件：在項目根目錄下（必定要在項目目錄下），輸入命令安裝插件

cnpm install axios

2. 在項目的main.js中配置

import axios from 'axios'
Vue.prototype.$axios = axios;  // 利用JS原型，在所有的組件中均可以訪問到axios插件

3. 在一個組件的邏輯中發送ajax請求實例

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服務器地址相同、app應用端口相同

  • 跨域：協議、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

8、 vue配置ElementUI

  • ElementUI是餓了麼的開源第三方模塊，做用和Bootstrap同樣，由於餓了麼全是由vue框架開發成的，因此ElementUI完美適應vue項目
  • 配置ElementUI步驟
1. 安裝插件（必定要在vue項目目錄下），代替Bootstrap的下載到本地操做
cnpm install element-ui

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

3. 使用
直接複製粘貼到組件的模板中便可

9、vue配置jQuery和Bootstrap環境

1. 配置jQuery環境

1. 安裝jQuery
cnpm install jQuery

2. vue項目在配置jQuery環境時，須要在vue.config.js文件中配置，若是vue項目沒有該文件，則在vue項目根目錄下手動建立

3. vue.config.js文件中書寫

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",  // $ 表示的就是jQuery中的$
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
 		}
};

2. 配置Bootstrap環境

1. 安裝Bootstrap

cnpm install bootstrap@3  // @3表示版本號，在終端中給python解釋器安裝則是 pip install bootstrap==3 ，3默認是3點幾版本中最穩定的那個版本

2. main.js文件中配置

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程