碼上歡樂
相關內容    簡體    繁體

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

本文轉載自   查看原文   2019-12-20 23:18   910    VUE框架

目錄

一、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
  • 第二步配置截圖
  • 圖一：

  • 圖二：

  • 圖三：

  • 圖四：

  • 圖五：

二、 開發項目

  • 在vue項目創建成功后，基本的項目框架已經搭建好了。我們只需要用一個IDE（集成開發環境）打開項目就可以進行項目開發了。這里我們用pycharm來開發vue項目。

1. 配置vue項目啟動功能

  • 使用pycharm開發vue項目，這里我們要配置項目啟動的功能，如下圖。

  • 圖一：

  • 圖二：

  • 圖三：

  • 圖四：

2. 開發vue項目

（1）項目文件的作用

  1. node_modules : 項目的依賴（不同電腦依賴需要重新構建），我們不用管

  2. public : 存放項目的頁面（因為vue框架是單頁面開發，所以只含有一個index默認的頁面），我們也不用動

  3. src : 存放與項目本身相關的文件 。我們主要是在這個文件夾中開發。

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

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

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

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

    • 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頁面的展示

三、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視圖函數的絕對路徑。

四、JS原型

// 利用JS原型，在vue項目中，我們可以產生一個可以在全局的vue實例都生效的屬性。

// 定義方式：
// 在vue項目的main.js文件中：

Vue.prototype.屬性名 = 屬性值（或變量）;  // 這樣就可以在vue項目的任意vue實例的中都可以訪問到

五、vue組件生命周期鈎子

  • 組件的生命周期鈎子就是：組件從創建到銷毀的整個生命周期中特殊時間節點對應的回調方法

  • 常用的生命周期鈎子

beforeCreate(){}  // 組件要創建之前

created(){}  // 組件創建成功  向后台發送數據請求，一般是加載快、比較小的數據

beforeMount(){}  // 組件要加載之前

mounted(){}  // 組件加載完成  ***特別耗時的數據請求，可以延后到組件初步加載成功后，再慢慢請求***

beforeUpdate(){}  // 項目中任意變量要變化之前

updated(){}  // 項目中任意變量剛變化之后

beforeDestroyed(){}  // 組件要銷毀之前

destoryed(){}  // 組件銷毀完成

六、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);
    });

七、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

八、 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. 使用
直接復制粘貼到組件的模板中即可

九、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"


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vue項目開發，用webpack配置解決跨域問題 Vue項目在開發環境跨域和生成環境部署跨域問題解決 Vue項目中的跨域問題（開發環境、生產環境） vue-cli的環境搭建和跨域請求基本設置 vue-webpack項目本地開發環境設置代理解決跨域問題 vue-webpack項目本地開發環境設置代理解決跨域問題 electron-vue項目中開發環境中的axios跨域問題 解決vue-cli項目開發中跨域問題 VUE前端項目配置代理解決跨域問題 vue-cli項目開發/生產環境代理實現跨域請求+webpack配置開發/生產環境的接口地址
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM