三、創(chuàng)建腳手架
一、環(huán)境準(zhǔn)備
1、安裝node.js
- **下載地址：**https://nodejs.org/zh-cn/
- 界面展示
2、檢查node.js版本
-
查看版本的兩種方式
node -vnode -version
- 出現(xiàn)版本號(hào)則說(shuō)明安裝成功（最新的以官網(wǎng)為準(zhǔn)）
3、為了提高我們的效率，可以使用淘寶的鏡像源
-
輸入：
npm install -g cnpm --registry=https://registry.npm.taobao.org即可安裝npm鏡像源 - 以后再用到
npm的地方直接用cnpm來(lái)代替就好了，因?yàn)闆](méi)有鏡像源的話，安裝速度比較慢
-
檢查是否安裝成功：
cnpm -v
二、搭建vue環(huán)境
1、全局安裝vue-cli
- 這里注意：安裝
vue-cli對(duì)node.js的版本是有要求的
-
裝的兩種方式：輸入
cmd命令-
npm install -g @vue/cli這個(gè)是從國(guó)外下載的比較慢 -
cnpm install -g @vue/cli這個(gè)是從鏡像源下載
-
-
查看安裝的版本（顯示版本號(hào)說(shuō)明安裝成功）
vue --version
-
如果你原來(lái)有版本或者版本比較低，可以升級(jí)
npm update -g @vue/cliyarn global upgrade --latest @vue/cli
三、創(chuàng)建vue項(xiàng)目
1、用cmd命令創(chuàng)建項(xiàng)
1.1 創(chuàng)建文件
- 以管理員身份打開(kāi)命令行界面，進(jìn)入任意一個(gè)想要?jiǎng)?chuàng)建項(xiàng)目的文件夾
- 輸入：
vue create vue01
1.2選擇配置信息
- 通過(guò)上下方向鍵選擇對(duì)應(yīng)配置，然后回車
1.3 創(chuàng)建成功
- Successfully created project vue_bailuo_02出現(xiàn)這個(gè)說(shuō)明創(chuàng)建成功
1.4運(yùn)行
- cd到項(xiàng)目文件夾下面
cd vue_bailuo_02
- 輸入代碼運(yùn)行文件
npm run serve
1.5 啟動(dòng)
- 在瀏覽器輸入對(duì)應(yīng)的網(wǎng)址就可以看到界面啦
- http://localhost:8080/
1.6 停止服務(wù)
- 兩下Ctrl+C 或者Ctrl+C一下然后Y
4、腳手架解構(gòu)分析
4.1 最開(kāi)始根目錄下的文件
4.1.1 .gitignore 文件
- 是git 的忽略文件
- 哪些文件或文件夾不想接受git的管理,你在這配好,關(guān)掉,結(jié)束
4.1.2 babel.config.js 文件（重要）
- 重要?dú)w重要,不需要我們?cè)诶锩鎸?xiě)東西;
babel控制文件你得告訴配置一下怎么轉(zhuǎn)換，采用什么樣的標(biāo)準(zhǔn)
- 直接用官方寫(xiě)好的，但是有些人比較好奇，可以參考babel中文官網(wǎng)文檔
4.1.3 package.json
- 只要你打開(kāi)的工程是一個(gè)符合npm規(guī)范的，那么一定會(huì)有包的說(shuō)明數(shù)(
package.json) - name:名字
- version:版本
- dependencies:采用的依賴
"core-js": "^3.8.3","vue": "^2.6.14":里面用了哪些庫(kù)
常用的一些命令
- 我們執(zhí)行
npm run serve其實(shí)是執(zhí)行了vue-cli-service serve
"serve": "vue-cli-service serve":是屬于我們?cè)陂_(kāi)發(fā)的過(guò)程中你去使用這個(gè)命令讓人家?guī)湍闩渲煤靡粋€(gè)服務(wù)器,幫你把東西都弄好了
"build": "vue-cli-service build":屬于是我的代碼寫(xiě)完了,我的功能開(kāi)發(fā)完了,人家后端找我要東西;你得給人家的是.html、.css、.js,所以build是構(gòu)建的意思;所有的功能都寫(xiě)完了最終想把整個(gè)工程變成一個(gè)瀏覽器能夠認(rèn)識(shí)的東西,那你執(zhí)行這個(gè)(也就是最后一次編譯)
"lint": "vue-cli-service lint":幾乎不用。如果你執(zhí)行了這個(gè)lint那就是把整個(gè)代碼里面寫(xiě)過(guò)的js、vue文件全都進(jìn)行一次語(yǔ)法檢查,告訴你哪寫(xiě)的不對(duì)，哪寫(xiě)的不太好。因?yàn)椴寮锩嬗懈玫臋z查;語(yǔ)法檢查肯定要檢查，但是要有個(gè)度。所以不太用
4.1.4 package-lock.json
- 這個(gè)是
包版本控制文件:你用到了一個(gè)包,這里記錄著包的版本信息(version)，記錄著下載地址信息(resolved) - 等你以后再安裝這個(gè)東西的時(shí)候它能保證最快的速度給你安裝到指定版本,如果沒(méi)有這個(gè)
lock文件版本就鎖不住了:如果你又下載一個(gè)文件的時(shí)候很有可能幫你下載一個(gè)8.x.xx,一般我們這個(gè)文件就留著
4.1.5 READMI.md
- 對(duì)整個(gè)工程進(jìn)行一個(gè)說(shuō)明、描述
4.2 src
-
執(zhí)行了
npm run serve之后,它首先是找到哪個(gè)文件開(kāi)始運(yùn)行，然后一點(diǎn)一點(diǎn)摸排清楚里面有倆個(gè)文件夾和倆個(gè)文件
4.2.1 App.Vue文件
- 看一下
App的結(jié)構(gòu)(<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">:引入外部的圖片(當(dāng)前目錄下assets的logo.png文件)
<HelloWorld msg="Welcome to Your Vue.js App"/>:引入一個(gè)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中有個(gè)特別重要的人,叫main.js,重要到當(dāng)你執(zhí)行完npm run serve命令之后,直接去運(yùn)行main.js
4.2.3 assets文件夾
- 這個(gè)文件夾名稱經(jīng)常在前端的項(xiàng)目里面出現(xiàn),這個(gè)文件夾一般放靜態(tài)資源；一般放圖片視頻等
4.2.4 components文件夾
- 叫組件們；所有程序員寫(xiě)得組件都往里面放,唯獨(dú)
App.vue - 從npm run serve開(kāi)始
npm run serve -> main.js -> App.vue -> 組件們 -放到了-> index.html
4.3 public文件夾
4.3.1 favicon.ico
網(wǎng)站得頁(yè)簽圖標(biāo)
4.3.2 index.html(非常重要)
它是我們整個(gè)應(yīng)用的界面
<!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">:針對(duì)IE瀏覽器的特殊配置,含義是讓這個(gè)IE瀏覽器以最高的渲染級(jí)別渲染頁(yè)面
<meta name="viewport" content="width=device-width,initial-scale=1.0">:開(kāi)啟移動(dòng)端的理想視口
<link rel="icon" href="<%= BASE_URL %>favicon.ico">:你的項(xiàng)目開(kāi)發(fā)完了，部署到服務(wù)器上的時(shí)候容易產(chǎn)生一個(gè)奇奇怪怪的路徑錯(cuò)誤,腳手架是這么說(shuō)的:你在這個(gè)html里面如果想引入文件,你別'./','../','/'都不要寫(xiě)了就寫(xiě)<%= BASE_URL %>
<%= BASE_URL %>:指的就是public所在的路徑,這個(gè)就代表了以前的'./'了,底層是有處理的
<title><%= htmlWebpackPlugin.options.title %></title>:配置網(wǎng)頁(yè)標(biāo)題
<%= htmlWebpackPlugin.options.title %>:就是默默來(lái)到package.json當(dāng)中,去找name。這是webpack里面的一個(gè)插件完成的功能,你只要這么寫(xiě)那就會(huì)去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>'就會(huì)出現(xiàn)到頁(yè)面上
其他都可以刪，唯獨(dú)容器的
<div>不能刪文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-836064.html
4.4 vue.config.js
使用 vue-cli 3.x 以上的腳手架創(chuàng)建的 vue 項(xiàng)目不再有 build文件夾，若需要進(jìn)行相關(guān)配置，需在項(xiàng)目目錄下新建文件 vue.config.js文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-836064.html
4.4.1 常用的配置
// 后端服務(wù)器地址
let url = 'http://localhost:8888'
module.exports = {
lintOnSave: false, //設(shè)置是否啟動(dòng)語(yǔ)法檢查
publicPath: './', // 【必要】靜態(tài)文件使用相對(duì)路徑
outputDir: "./dist", //打包后的文件夾名字及路徑
devServer: { // 開(kāi)發(fā)環(huán)境跨域情況的代理配置
proxy: {
// 【必要】訪問(wèn)自己搭建的后端服務(wù)器
'/api': {
target: url,
changOrigin: true,
ws: true,
secure: false,
pathRewrite: {
'^/api': '/'
}
},
// 【范例】訪問(wèn)百度地圖的API
// vue文件中使用方法 this.$http.get("/baiduMapAPI/place/v2/search"
// 最終實(shí)際訪問(wèn)的接口為 http://api.map.baidu.com/place/v2/search
// 遇到以/baiduMapAPI開(kāi)頭的接口便使用此代理
'/baiduMapAPI': {
// 實(shí)際訪問(wèn)的服務(wù)器地址
target: 'http://api.map.baidu.com',
//開(kāi)啟代理：在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣客戶端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問(wèn)題
changOrigin: true,
ws: true, // 是否啟用websockets
secure: false, // 使用的是http協(xié)議則設(shè)置為false，https協(xié)議則設(shè)置為true
// 將接口中的/baiduMapAPI去掉（必要）
pathRewrite: {
'^/baiduMapAPI': ''
}
},
}
}
}
到了這里，關(guān)于三、創(chuàng)建腳手架和腳手架分析的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
