前端之Vue配置

本教程基于vue3進行講解

不要擔心學了沒用，xue你學前后端都是用的到的

本來呢，在閱讀本教程之前，你應該具備以下知識：

HTML
css
JavaScript

不過本篇博客并不涉及復雜代碼，放心食用~~

畢竟hello world還是要的

1. vue是什么

基于官方了解：

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動，

簡單了解：

vue是一個前端框架，他的功能是簡化我們的開發流程，能夠讓我們快速的開發頁面，

說實在的，你現在不了解也沒事，畢竟你只要會用，慢慢就了解了

2. vue的優點

vue是基于MVVM的框架，vue就是組件化的框架，這么做的優點是：前后端分離，易于開發，解耦度高，

說實在的，你現在不了解也沒事，畢竟你只要會用，慢慢就了解了

3. vue的安裝

簡單安裝

就像jQuery一樣，你只需要將其原始碼下載下來，使用script標簽匯入就可以了，

原始碼地址

點擊，復制源代碼，然后自己找個檔案，粘貼進去即可
先學會上面這個就行了~~想了解別的方式就自行查閱吧

4. 創建一個目錄

在你的檔案夾里面，創建一個專案目錄（以后學習用，今天先搞hello world），命名你可以隨意，

然后創建兩個檔案夾：jss，css用于用于存放js腳本和css樣式，

然后創建一個html檔案，命名為index，用于專案首頁，

5. Hello World

在IT界，萬物皆有Hello World~

編輯器使用vs code這個我就不用多說了吧

在vs code打開你剛剛創建的專案：

左上角File->Open Folder
找到你的專案路徑，點擊打開
打開index.html檔案

撰寫如下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue_HelloWorld</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="hello">
        {{ a }}  <!-- 類似于變數，用于顯示字串，可以隨意修改，但是大括號不能變  -->
    </div>
    <script>
        const hello = {  // 定義一個函式，用于顯示變數所代表的字串
            data(){      // 它是一個函式，具體效果不用管，他是必須要有的
                return{
                    a: "Hello World！I'm Vue!"  // 將字串賦值給a
                }
            }
        }
        Vue.createApp(hello).mount("#hello")    // 使用vue，并通過ID選擇器將div選擇
    </script>
</body>
</html>

F5運行你的HTML檔案，就可以看到字串了

書籍介紹

【書籍封面】
在這里插入圖片描述

【參考文案】

技術全面、完整、系統—對標企業專案技術堆疊

講解詳細、通俗易懂——分析循序漸進且邏輯強

有學習討論交流群——快速成為前端工程師

【內容簡介】

Vue.js 是一套構建用戶界面的漸進式框架，本書旨在幫助讀者全面掌握 Vue.js 全家桶技術和單頁面前后端分離專案開發，理解 MVVM 框架思想，讓前端和后端開發人員快速精通 Vue.js 全家桶技術，

本書貫穿入門準備實操、基礎核心案例、中級進階實戰、綜合進階專案進行講解，循序漸進、環環相扣，通俗易懂，并分析為什么這樣使用，讓你知其所以然，包含的主要技術：NPM/CNPM、VS Code、Vue.js、 MVVM、Axios、Vue Router、webpack、ECMAScript 6、Vue Loader、Vue CLI、Element UI、Vuex、 Mock.js、Easy Mock、ECharts 、Promise、攔截器、組件通信、跨域問題、上線部署等，

本書適合有 HTML、CSS、JavaScript 基礎的 Vue.js 零基礎小白、前端開發人員、后端開發人員，同時，也適合以下人員閱讀：在校生，需要掌握流行的新技術，做到與職場同步；在職人員，作業中需要學習使用Vue；有基礎學員，需要系統、全面、高效使用 Vue 技術，

【作者簡介】

徐照興， 2020年取得首屆江西省普通本科高校金牌教授，高級專案經理，51CTO學院特級講師，CSDN學院、騰訊課堂、網易云課堂、淘寶教育等在線教育平臺講師，主要研究領域為計算機應用技術教學、Web資料庫應用程式開發、智能資訊系統開發，任教的課程獲批江西省在線精品開放課程、江西省線上線下混合式一流課程；指導學生參加省級以上賽事，多次獲一等獎、二等獎、三等獎，筆者獲優秀指導教師；以主持人身份獲中國紡織工業聯合會教學成果獎二等獎、三等獎各1項，校級教學成果獎一等獎、二等獎各1項，獲實用專利6項新型、軟體著作登記權20余項，

京東自營購買鏈接

https://item.m.jd.com/product/13441784.html

當當自營購買鏈接

http://product.dangdang.com/29303081.html

關注下方公眾號，更多精彩內容等你來探索

m/product/13441784.html


當當自營購買鏈接

```c
http://product.dangdang.com/29303081.html

關注下方公眾號，更多精彩內容等你來探索

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/340480.html

標籤：其他

上一篇：C語言每日一練——第45天：n人圍圈報數問題

下一篇：Python入門：看了這篇文章如果1個小時沒法入門Python，那么還是換個語言吧！！