工程環境配置

1.安裝nodejs

這里我已經安裝過了，只需要打開鏈接Node.js — Run JavaScript Everywhere直接下載nodejs，安裝直接一直下一步下一步

安裝完成之后我們來使用電腦的命令行窗口檢查一下版本

查看npm源

?

這里npm源的地址是淘寶的源，不是官方源，因為我之前已經改了，當我們獲取源數據時會從外國的源里面獲取，這里我們更換一下獲取源的位置

這里我們將獲取源數據的位置更改了

?這里我們也可以安裝其它的包管理器

?比如yarn和pnpm

npm install yarn -g 
npm install pnpm -g 

檢測是否安裝成功

pnpm -v
yarn -v

?創建腳手架

?創建腳手架其實就是創建一個項目文件，但是這個項目文件已經為我們添加了很多代碼，所以我們就不需要去寫，直接拿來用就可以了

選擇一個存放腳手架文件的位置

這里我直接選擇桌面，然后已終端的形式打開這個文件

執行命令

npm create vue@latest

會安裝并執行create-vue

?然后命令行會問我們這個項目要取什么名字，需不需要什么功能，這里的功能我們全都選擇否

我們會得到一個文件，我們來用終端來打開這個文件

npm i

用來安裝vue的模塊依賴，后續指令需要它來實現

npm run dev

啟動項目，啟動完了項目終端會給我們一個鏈接，這個鏈接對應的地址就是本地服務器的網頁

讓我們打開終端給我們的鏈接

?這是vue給我們的初始頁面

這樣很多東西就不需要我們自己去配置，直接下載到本地直接用就可以了，這種東西我們稱為腳手架

認識腳手架目錄

node_modules里面有很多我們環境需要使用到的包，不如vue包，這樣我們就不需要到官網去獲取vue的數據，直接安裝在本地直接拿來用就可以了

package.json用來管理項目的文件

src/main.js是整個項目打包的入口

App.vue是vue代碼的入口

index.html是項目入口網頁

src下的所有代碼都會被vite打包成css/js/html交給index.html然后呈現在觀眾眼前

分析腳手架中三個入口級代碼

三個入口文件分別是：main.js，App.vue，index.html

?main.js負責將App.vue的代碼整合起來創建應用，App.vue負責根層的組件，index.html負責將main.js打包形成的應用在網頁中展示出來

Vue單文件

Vue的文件由三個部分組成分別是HTML，CSS，JS，我們來看Vue文件的簡化版

<script setup>
//數據...
</script><template>
<!-- 數據.. -->
</template><style scoped>
/* 數據 */
</style>

script：JS，template：HTML，style：CSS

這里的scoped能讓<style>保證修飾<template>

清理目錄?

?為了便于后于的開發，我們將腳手架默認給我們的數據刪除，分別是assets和component還有Vue里面的初三大框架之外的代碼

現在這個項目里的代碼文件才是項目主體

?代碼相應練習

<script setup>
import { ref,reactive } from "vue"
let str=ref("hello,world")
let obj=reactive({num:69,str1:"ganchuhao",grade:60
})
function func() {return 100
}
</script>
<template><p>{{ str }}</p><p>我是{{obj.str1}}學號是{{ obj.num}}</p><p>我是{{obj.str1}}學號是{{ obj.num+200}}</p><p>成績{{ obj.grade>60?"及格":"不及格" }}</p><p>func的返回值是{{ func() }}</p><p>STR的單詞有{{ str.split(' ').length }}個單詞</p></template>
<style scoped>
</style>

演示結果

?快速生成基礎代碼

vbase

?