三、創建腳手架和腳手架分析

三、創建腳手架

一、環境準備

1、安裝node.js

  • **下載地址：**https://nodejs.org/zh-cn/
  • 界面展示

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

2、檢查node.js版本

  • 查看版本的兩種方式

    • node -v
    • node -version

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

    • 出現版本號則說明安裝成功（最新的以官網為準）

3、為了提高我們的效率，可以使用淘寶的鏡像源

  • 輸入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安裝npm鏡像源
  • 以后再用到npm的地方直接用cnpm來代替就好了，因為沒有鏡像源的話，安裝速度比較慢

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 檢查是否安裝成功：cnpm -v

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

二、搭建vue環境

1、全局安裝vue-cli

  • 這里注意：安裝vue-cli對node.js的版本是有要求的

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 裝的兩種方式：輸入cmd命令

    • npm install -g @vue/cli 這個是從國外下載的比較慢
    • cnpm install -g @vue/cli 這個是從鏡像源下載

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 查看安裝的版本（顯示版本號說明安裝成功）

    • vue --version

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 如果你原來有版本或者版本比較低，可以升級
    • npm update -g @vue/cli
    • yarn global upgrade --latest @vue/cli

三、創建vue項目

1、用cmd命令創建項

1.1 創建文件
  • 以管理員身份打開命令行界面，進入任意一個想要創建項目的文件夾
  • 輸入：vue create vue01

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

1.2選擇配置信息
  • 通過上下方向鍵選擇對應配置，然后回車

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

1.3 創建成功
  • Successfully created project vue_bailuo_02出現這個說明創建成功

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

1.4運行
  • cd到項目文件夾下面
  • cd vue_bailuo_02

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 輸入代碼運行文件
  • npm run serve

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

1.5 啟動
  • 在瀏覽器輸入對應的網址就可以看到界面啦
  • http://localhost:8080/

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

1.6 停止服務
  • 兩下Ctrl+C 或者Ctrl+C一下然后Y

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

4、腳手架解構分析

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

4.1 最開始根目錄下的文件

4.1.1 .gitignore 文件

  • 是git 的忽略文件
  • 哪些文件或文件夾不想接受git的管理,你在這配好,關掉,結束

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

4.1.2 babel.config.js 文件（重要）

  • 重要歸重要,不需要我們在里面寫東西;babel控制文件你得告訴配置一下怎么轉換，采用什么樣的標準

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 直接用官方寫好的，但是有些人比較好奇，可以參考babel中文官網文檔

4.1.3 package.json

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 只要你打開的工程是一個符合npm規范的，那么一定會有包的說明數(package.json)
  • name:名字
  • version:版本
  • dependencies:采用的依賴
  • "core-js": "^3.8.3","vue": "^2.6.14":里面用了哪些庫

常用的一些命令

  • 我們執行npm run serve其實是執行了vue-cli-service serve
"serve": "vue-cli-service serve":是屬于我們在開發的過程中你去使用這個命令讓人家幫你配置好一個服務器,幫你把東西都弄好了
"build": "vue-cli-service build":屬于是我的代碼寫完了,我的功能開發完了,人家后端找我要東西;你得給人家的是.html、.css、.js,所以build是構建的意思;所有的功能都寫完了最終想把整個工程變成一個瀏覽器能夠認識的東西,那你執行這個(也就是最后一次編譯)
"lint": "vue-cli-service lint":幾乎不用。如果你執行了這個lint那就是把整個代碼里面寫過的js、vue文件全都進行一次語法檢查,告訴你哪寫的不對，哪寫的不太好。因為插件里面有更好的檢查;語法檢查肯定要檢查，但是要有個度。所以不太用

4.1.4 package-lock.json

  • 這個是包版本控制文件:你用到了一個包,這里記錄著包的版本信息(version)，記錄著下載地址信息(resolved)
  • 等你以后再安裝這個東西的時候它能保證最快的速度給你安裝到指定版本,如果沒有這個lock文件版本就鎖不住了:如果你又下載一個文件的時候很有可能幫你下載一個8.x.xx,一般我們這個文件就留著

4.1.5 READMI.md

  • 對整個工程進行一個說明、描述

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

4.2 src

  • 執行了npm run serve之后,它首先是找到哪個文件開始運行，然后一點一點摸排清楚

    里面有倆個文件夾和倆個文件

4.2.1 App.Vue文件

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 看一下App的結構(<template></template>):
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template>

 <img alt="Vue logo" src="./assets/logo.png">:引入外部的圖片(當前目錄下assets的logo.png文件)<HelloWorld msg="Welcome to Your Vue.js App"/>:引入一個HelloWorld

<script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script>

<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

4.2.2 main.js文件

  • src中有個特別重要的人,叫main.js,重要到當你執行完npm run serve命令之后,直接去運行main.js

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

4.2.3 assets文件夾

  • 這個文件夾名稱經常在前端的項目里面出現,這個文件夾一般放靜態資源；一般放圖片視頻等

4.2.4 components文件夾

  • 叫組件們；所有程序員寫得組件都往里面放,唯獨App.vue
  • 從npm run serve開始
npm run serve -> main.js -> App.vue -> 組件們 -放到了-> index.html

4.3 public文件夾

4.3.1 favicon.ico

網站得頁簽圖標

4.3.2 index.html(非常重要)

它是我們整個應用的界面

<!DOCTYPE html>
<html lang=""><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"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">:針對IE瀏覽器的特殊配置,含義是讓這個IE瀏覽器以最高的渲染級別渲染頁面<meta name="viewport" content="width=device-width,initial-scale=1.0">:開啟移動端的理想視口<link rel="icon" href="<%= BASE_URL %>favicon.ico">:你的項目開發完了，部署到服務器上的時候容易產生一個奇奇怪怪的路徑錯誤,腳手架是這么說的:你在這個html里面如果想引入文件,你別'./','../','/'都不要寫了就寫<%= BASE_URL %>
<%= BASE_URL %>:指的就是public所在的路徑,這個就代表了以前的'./'了,底層是有處理的<title><%= htmlWebpackPlugin.options.title %></title>:配置網頁標題
<%= htmlWebpackPlugin.options.title %>:就是默默來到package.json當中,去找name。這是webpack里面的一個插件完成的功能,你只要這么寫那就會去package.json中去找<noscript></noscript>:如果你的瀏覽器不支持js那么'<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>'就會出現到頁面上

其他都可以刪，唯獨容器的<div>不能刪

4.4 vue.config.js

使用 vue-cli 3.x 以上的腳手架創建的 vue 項目不再有 build文件夾，若需要進行相關配置，需在項目目錄下新建文件 vue.config.js

4.4.1 常用的配置

// 后端服務器地址
let url = 'http://localhost:8888'
module.exports = {lintOnSave: false, //設置是否啟動語法檢查publicPath: './',  // 【必要】靜態文件使用相對路徑outputDir: "./dist", //打包后的文件夾名字及路徑devServer: {  // 開發環境跨域情況的代理配置proxy: {// 【必要】訪問自己搭建的后端服務器'/api': {target: url,changOrigin: true,ws: true,secure: false,pathRewrite: {'^/api': '/'}},// 【范例】訪問百度地圖的API// vue文件中使用方法  this.$http.get("/baiduMapAPI/place/v2/search"// 最終實際訪問的接口為  http://api.map.baidu.com/place/v2/search// 遇到以/baiduMapAPI開頭的接口便使用此代理'/baiduMapAPI': {// 實際訪問的服務器地址target: 'http://api.map.baidu.com',//開啟代理：在本地會創建一個虛擬服務端，然后發送請求的數據，并同時接收請求的數據，這樣客戶端和服務端進行數據的交互就不會有跨域問題changOrigin: true,ws: true,  // 是否啟用websocketssecure: false, // 使用的是http協議則設置為false，https協議則設置為true// 將接口中的/baiduMapAPI去掉（必要）pathRewrite: {'^/baiduMapAPI': ''}},}}
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/696381.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/696381.shtml
英文地址，請注明出處：http://en.pswp.cn/news/696381.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

深度學習從入門到不想放棄-7

深度學習從入門到不想放棄-7

上一章的內容 深度學習從入門到不想放棄-6 (qq.com) 今天講的也算基礎（這個系列后來我一尋思，全是基礎 ），但是可能要著重說下，今天講前向計算和反向傳播，在哪兒它都永遠是核心，不管面對什么模型 前向計算： 有的叫也叫正向傳播，正向計算的，有的直接把前向的方法梯度下…
閱讀更多...
祖龍娛樂 x Incredibuild

祖龍娛樂 x Incredibuild

關于祖龍娛樂 祖龍娛樂有限公司&#xff08;下文簡稱“祖龍娛樂”&#xff09;是一家總部位于北京的移動游戲開發公司&#xff0c;成立于 2014 年&#xff0c;擁有成功的大型多人在線角色扮演游戲移動游戲組合&#xff0c;如《六龍爭霸》、《夢幻誅仙》和《萬王之王 3D》。公司…
閱讀更多...
微信小程序 ---- 慕尚花坊 項目初始化

微信小程序 ---- 慕尚花坊 項目初始化

目錄 項目介紹 01. 項目概述 02. 項目演示 03. 項目技術棧 04. 接口文檔 申請開發權限 項目初始化 01. 創建項目與項目初始化 02. 自定義構建 npm 集成Sass 03. 集成項目頁面文件 04. VsCode 開發小程序項目 項目介紹 01. 項目概述 [慕尚花坊] 是一款 同城鮮花訂購…
閱讀更多...
Context Capture無法量測連接點，Survey提示Read only只讀模式

Context Capture無法量測連接點，Survey提示Read only只讀模式

Context Capture無法量測連接點&#xff0c;Surveys提示Read only只讀模式 出現這個問題一般是因為當前block已經完成三維重建&#xff0c;所以無法再編輯稀疏重建&#xff08;空三&#xff09;結果。只能把當前block復制一份&#xff0c;在復制的block上量測新的連接點。如下…
閱讀更多...
Netty中的Arena是什么以及LT和ET

Netty中的Arena是什么以及LT和ET

Arena是什么 在Netty中,Arena是一種內存分配器(Memory Allocator)的概念。Arena的主要目的是提高內存分配和釋放的效率&#xff0c;減少碎片化&#xff0c;從而提高系統性能。 具體而言&#xff0c;Netyy中的Arena主要用于分配和管理ByteBuf對象的內存&#xff0c;ByteBuf是Ne…
閱讀更多...
分班問題 、幼兒園分班（C語言）

分班問題 、幼兒園分班（C語言）

題目 幼兒園兩個班的小朋友排隊時混在了一起&#xff0c;每個小朋友都知道自己跟前面一個小朋友是不是同班&#xff0c;請你幫忙把同班的小朋友找出來 小朋友的編號為整數&#xff0c;與前面一個小朋友同班用Y表示&#xff0c;不同班用N表示 輸入 輸入為空格分開的小朋友編號…
閱讀更多...
PowerDesigner 安裝

PowerDesigner 安裝

PowerDesigner 安裝漢化破解使用過程 - 淪陷 - 博客園 (cnblogs.com)https://www.cnblogs.com/huangting/p/12654057.html
閱讀更多...
不要浪費

不要浪費

解法&#xff1a; 記錄一下tle的代碼 #include <iostream> #include <vector> #include <algorithm> using namespace std; #define endl \n bool check(vector<int>& a, int l,int k) {int sum 0;for (int i 0; i < a.size() && l…
閱讀更多...
vue3中使用 tui-image-editor進行圖片處理,并上傳

vue3中使用 tui-image-editor進行圖片處理,并上傳

效果圖 下載包 pnpm i tui-image-editor pnpm i tui-color-picker調用組件 //html部分 <el-dialog v-model"imgshow" destroy-on-close width"40%" draggable align-center :show-close"true":close-on-click-modal"false">&l…
閱讀更多...
mescroll 在uni-app 運行的下拉刷新和上拉加載的組件

mescroll 在uni-app 運行的下拉刷新和上拉加載的組件

官網傳送門: https://www.mescroll.com/uni.html 最近使用到了mescroll 但是一直都是整個頁面的滾動, 最近需求有需要局部滾動, 收藏了一個博主的文章覺得寫的還挺好, 傳送門: https://blog.csdn.net/Minions_Fatman/article/details/134754926?spm1001.2014.3001.5506 使用…
閱讀更多...
基于springboot+vue的視頻網站系統(前后端分離)

基于springboot+vue的視頻網站系統(前后端分離)

博主主頁&#xff1a;貓頭鷹源碼 博主簡介&#xff1a;Java領域優質創作者、CSDN博客專家、阿里云專家博主、公司架構師、全網粉絲5萬、專注Java技術領域和畢業設計項目實戰&#xff0c;歡迎高校老師\講師\同行交流合作 ?主要內容&#xff1a;畢業設計(Javaweb項目|小程序|Pyt…
閱讀更多...
Stable Diffusion 模型分享：FenrisXL（芬里斯XL）

Stable Diffusion 模型分享：FenrisXL（芬里斯XL）

本文收錄于《AI繪畫從入門到精通》專欄，專欄總目錄：點這里。 文章目錄 模型介紹生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十
閱讀更多...
IO進程線程第6天

IO進程線程第6天

1.使用有名管道完成兩個進程的相互通信 send.c代碼如下&#xff1a; #include <myhead.h>int main(int argc, const char *argv[]) {pid_t pidfork();if(pid>0){//父進程//從管道1中讀取數據int fd-1;if((fdopen("./mkfifo1",O_RDONLY))-1){perror("…
閱讀更多...
【安卓基礎3】Activity（一）

【安卓基礎3】Activity（一）

&#x1f3c6;作者簡介&#xff1a;|康有為| &#xff0c;大四在讀&#xff0c;目前在小米安卓實習&#xff0c;畢業入職 &#x1f3c6;本文收錄于 安卓學習大全&#xff0c;歡迎關注 &#x1f3c6;安卓學習資料推薦&#xff1a; 視頻&#xff1a;b站搜動腦學院 視頻鏈接 &…
閱讀更多...
微信小程序開發教程：

微信小程序開發教程：

準備工作 下載并安裝微信開發者工具注冊微信公眾平臺賬號并創建小程序項目 項目結構 app.js&#xff1a;小程序的入口文件&#xff0c;用于定義全局變量和函數app.json&#xff1a;小程序的全局配置文件&#xff0c;用于配置小程序的頁面、窗口樣式、網絡超時時間等app.wxss&am…
閱讀更多...
反光衣實時識別檢測系統-反光衣穿戴識別系統-智慧工地系統安全帽佩戴---豌豆云

反光衣實時識別檢測系統-反光衣穿戴識別系統-智慧工地系統安全帽佩戴---豌豆云

反光衣實時識別檢測系統是根據視頻流的自動化圖像識別檢測&#xff0c;運用前沿的深度神經網絡與云計算技術&#xff0c;替代工作人員的眼睛。 在工地、化工廠、煤礦石化等生產安全地區部署反光衣實時識別檢測系統&#xff0c;運用現場已有的視頻監控可以無死角全自動檢測生產…
閱讀更多...
Sora橫空出世！AI將如何撬動未來？

Sora橫空出世！AI將如何撬動未來？

近日&#xff0c;OpenAI 發布首個視頻生成“Sora”模型&#xff0c;該模型通過接收文字指令&#xff0c;即可生成60秒的短視頻。 而在2022年末&#xff0c;同樣是OpenAI發布的AI語言模型ChatGPT&#xff0c;簡化了文本撰寫、創意構思以及代碼校驗等任務。用戶僅需輸入一個指令&…
閱讀更多...
【IC設計】Chisel API之Arbiter和RRArbiter的使用

【IC設計】Chisel API之Arbiter和RRArbiter的使用

文章目錄 介紹Chisel的Valid和Ready流控build.sbtRRArbiter代碼示例 介紹 仲裁器在NoC路由器中是重要的組成部分&#xff0c;虛通道仲裁和交叉開關仲裁都需要使用仲裁器。 Chisel提供了Arbiter和RRArbiter仲裁器 Arbiter是基礎的低位優先仲裁器&#xff0c; RRArbiter初始情況…
閱讀更多...
前端構建效率優化之路

前端構建效率優化之路

項目背景 我們的系統&#xff08;一個 ToB 的 Web 單頁應用&#xff09;前端單頁應用經過多年的迭代&#xff0c;目前已經累積有大幾十萬行的業務代碼&#xff0c;30 路由模塊&#xff0c;整體的代碼量和復雜度還是比較高的。 項目整體是基于 Vue TypeScirpt&#xff0c;而構…
閱讀更多...
ProtoBuf認識與Windows下的安裝

ProtoBuf認識與Windows下的安裝

protobuf簡介 Protobuf 是 Protocol Buffers 的簡稱&#xff0c;它是 Google 公司開發的一種數據描述語言&#xff0c;是一種輕便高效的結 構化數據存儲格式&#xff0c;可以用于結構化數據&#xff0c;或者說序列化。它很適合做數據存儲 或 RPC 數據交換格 式 。可用于通訊…
閱讀更多...
最新文章

Copyright @ 2022~2023