Vue單頁面開發環境安裝

阿新 • • 發佈：2021-01-29

1. 背景

Vue有兩種使用方式，第一種比較簡單，通過<script>標籤直接將Vue引入頁面後，在當前頁面使用Vue即可。

第二種方式比較複雜，是通過NPM構建工程化的Vue專案，當然複雜有複雜的好處，可以使用的功能更加多，可以支撐複雜應用的開發。

在入門學習階段，可以使用第一種方式，快速入門。在熟悉了Vue方方面面後，再使用第二種方式深入學習使用。

2. 使用標籤引入Vue

可以直接通過CDN引入Vue，開發環境使用如下方式，可以檢視警告和除錯資訊。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" 
></script>

生產環境下可以使用更加精簡的版本，提高執行效率

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

當然也可以直接下載到專案中，自行加以引用，此處附上下載連結：下載連結。

3. 測試一下

接下來可以使用一段程式碼測試下是否生效。

<html>
  <head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" 
></script>
  </head>
  <body>
      <div id="app">
        展示資訊:{{message}}
      </div>
      <script>
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue'
          }
        });
      </script>
  </ 
body>
</html>

如上程式碼，如果在頁面上能顯示展示資訊:Hello Vue，表明咱們的安裝配置成功了。

4. 總結

通過<script>建立Vue的安裝環境，與引入一般的js檔案庫沒有啥區別。

這種方式足夠簡單，一般用於單頁面網頁開發。

如有問題請掃碼聯絡我
在這裡插入圖片描述

Vue單頁面開發環境安裝

技術標籤：前端----VueVue單元頁面環境開發配置 1. 背景 Vue有兩種使用方式，第一種比較簡單，通過<script>標籤直接將Vue引入頁面後，在當前頁面使用Vue即可。

go語言開發環境安裝及第一個go程式(推薦)

Go（又稱Golang）是Google開發的一種靜態強型別、編譯型、併發型，並具有垃圾回收功能的程式語言。

4種Windows系統下Laravel框架的開發環境安裝及部署方法詳解

1.準備工作 1.1PHP整合環境這裡我們使用的是XAMPP，XAMPP是一個功能強大的建站整合軟體包，採用一鍵安裝的方式，包含PHP7.0、Mysql、Tomcat等。最新版下載地址：PHP 5.6.28版（32位）|PHP 7.0.13版（32位）這兩個版

第一章：c#開發環境安裝

安裝流程：進入微軟官方安裝在右上角的所有Microsoft裡點選visual studio然後找到安裝

模擬vue單頁面應用hash模式切換效果簡單實現

程式碼簡單實現： <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

vue單頁面應用開啟新視窗顯示跳轉頁面的方法

一般單頁面應用，例如vue都是通過vue-router來做跳轉，不會像多頁應用一樣另起新頁面顯示，但是也不排除一些業務上的需要。

淺談vue單頁面中有多個echarts圖表時的公用程式碼寫法

html中： <div class=\"charts1\"/> <div class=\"charts2\"/> <div class=\"charts3\"/> <div class=\"charts4\"/>

解決vue單頁面回退頁面 keeplive 快取問題

場景：專案中遇到 vue 點選回退從A頁跳到B頁，快取A頁，當B頁狀態修改再次返回A時，A頁查詢條件快取不重新整理，列表重新整理

解決vue單頁面多個元件巢狀監聽瀏覽器視窗變化問題

需求最近公司有個大屏展示專案（如下圖）頁面的元素需要做響應式監聽，圖表需要跟著視窗響應變化

VUE 單頁面使用 echart 視窗變化時的用法

在 VUE 專案中，為了使 echart 在視窗變化時能夠自適應，要用到window.resize = function(){ .......};

CentOS下配置Java開發環境---安裝redis

前言偶然看到部落格園支援markdown寫部落格，恰巧最近在看redis的資料，趕緊用markdown來寫一份redis傻瓜式安裝指南。

解決vue單頁面應用進入頁面載入所有 js 的問題

一般在index.js中都是這麼引入的元件 import from \'@/pages/my\' import Cart from \'@/pages/cart\'

解決vue單頁面應用打包後相對路徑、絕對路徑相關問題

在專案開發過程中，在部署過程中，用到了反向代理，這就要求前端程式碼中不能使用絕對路徑。但是我們知道，一般情況下，通過webpack+vuecli預設打包後的HTML、css、js等檔案，使用的都是絕對路徑。下面可以舉幾個例子

vue-cli3 配置開發環境、測試環境、線上環境

001、在package.json檔案中新增 \"scripts\": { \"serve\": \"vue-cli-service serve\", //呼叫開發api

Windows下C++單檔案開發環境搭建（不適合新手）

博文背景還記得曾經在Windows下折騰C++的開發環境非常頭疼，各種報錯。後來隨著技術的進步和社群的努力，可以在一兩分鐘內搭建好寫OJ的那種開發環境。這篇文章作為個人記錄帖，不適合新手。

Oracle APEX 系列文章4：在阿里雲上打造屬於你自己的APEX完整開發環境 (安裝XE, ORDS, APEX)...

2019獨角獸企業重金招聘Python工程師標準>>> Oracle APEX 系列文章4：在阿里雲上打造屬於你自己的APEX完整開發環境 (安裝XE, ORDS, APEX)

vue單頁面

<!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title></title>

vue單頁面修改樣式無法覆蓋問題

當 <style> 標籤有 scoped 屬性時，它的css只作用於當前元件中的元素。vue元件編譯後，會將 template 中的每個元素加入 [data-v-xxxx] 屬性來確保 style scoped 僅本元件的元素而不會汙染全域性。

解決vue單頁面應用做微信JSSDK注入許可權時出現“invalid signature”（ios端）

——都說微信開發多坑，沒想到遇到一個天坑。在做一個vue專案時，要用到微信JS-SDK，官方文件詳見：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html。

Vue前端頁面開發

環境搭建利用@vue/cli4建立工程,為相容element-ui選用vue2.x版本 vue create vue-demo 新增element-ui框架

Vue單頁面開發環境安裝

1. 背景

2. 使用標籤引入Vue

3. 測試一下

4. 總結

相關推薦