Vue：第一個vue-cli專案
什么是vue-cli
vue-cli官方提供的一個腳手架，用于快速生成一個vue的專案模板；
預先定義好的目錄結構及基礎代碼，就好比我們在創建Maven專案時可以選擇創建一個骨架專案，這個骨架專案就是腳手架，我們的開發更加的快速；
主要的功能：
- 統一的目錄結構
- 本地除錯
- 熱部署
- 單元測驗
- 集成打包上線
需要的環境
-
Node.JS:https://nodejs.org/zh-cn/download/
安裝就無腦一直下一步就好，安裝在自己的環境目錄下
使用.mis安裝包window會自動幫我們整個打包好并配置好了系統環境變數，就算卸載也可以通過window完全卸載干凈，zip需要自己配置環境變數
- 系統變數新建NODE_HOME, 值為Nodejs根目錄
- 系統變數path編輯,添加%NODE_HOME%和%NODE_HOME%/node_global
- 在根目錄添加node_global和node_cache檔案夾
- npm config set prefix “根目錄\node_global”
- npm config set cache “根目錄\node-cache”
-
Git:https://git-scm.com/downloads（暫時不需要）
鏡像:https://npm.taobao.org/mirrors/git-for-windows
確認nodejs安裝成功
-
cmd管理員身份下輸入
node -v，查看是否能夠正確列印出版本號即可 -
cmd管理員身份下輸入
npm -v，查看是否能夠正確列印出版本號即可這個npm，就是一個軟體包管理工具，就和linux下的apt軟體安裝差不多
安裝Node.js淘寶鏡像加速器（cnpm）
這樣子的話，下載會快很多~
# -g 就是全域安裝
npm install cnpm -g
# 或使用如下陳述句解決npm速度慢的問題
npm install --registry=https://registry.npm.taobao.org
? 安裝的位置：C:\Users\Adminstrator\AppDate\Roaming\npm
? 注意：如果是用.zip的位置會不同，上面有說明
? 然后設定系統權限,不然可能裝不了yarn或vue-cli，以下的命令列最好使用powershell，管理員身份運行，cmd可能執行不了
set-ExecutionPolicy RemoteSigned
? 用cnpm安裝yarn
cnpm install -g yarn
? 用cnpm安裝vue-cli
cnpm install -g @vue/cli
? npm, cnpm, yarn都是打包方式
第一個vue-cli應用程式
- 輸入指令，會出現專案儀表盤
vue ui
- 打開專案管理器
- 點擊創建并配置專案路徑,寫完路徑記得回車
- 配置專案名+包管理器
- 選擇手動配置
- 選擇需要安裝的插件，默認一下三個就好了
- .選擇vue版本和排錯策略
- 不保存預設,除非你對剛才的配置很熟悉
- 等待
10.成功后會進入到儀表盤
- 下載webStorm，用webStorm打開專案
官網：https://www.jetbrains.com/webstorm/
- 專案目錄
- node_modules類似于后端的jar包依賴libraries
- App.vue被main.js渲染的主頁面
- main.js是VueCli專案主入口
- package.json管理插件版本和專案基本資訊
- 點擊Terminal，會發現像cmd一樣可以輸入指令
- 輸入以下兩行指令
會出現以下畫面
- 雙擊任何一個地址
出現這個東西相當于就專案搭建成功了！！！
什么是WebStorm
WebStorm 是JetBrains公司旗下一款JavaScript開發工具，已經被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等，與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能，
WebStorm具有智能代碼補全、代碼格式化、html提示、聯想查詢、代碼除錯等多種優勢功能，其對業界最新技術提供支持，支持流行的版本控制系統，為前端開發人員提供了極大的方便，
測驗案例
如果專案構建成功之后，那么接下來就開發我們自己的專案，在這里我就做一個小案例，方便大家理解和應用，那么我們接下來的這個案例是關于vue路由的使用，首先我們在src/components目錄下構建三個組件componentA,componentB,componentC,結構如下
- A代碼
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'ComponentA',
data(){
return{
msg:'這是組件A',
}
}
}
</script>
<style scoped>
h1{
color: red;
}
</style>
- B代碼
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'ComponentB',
data(){
return{
msg:'這是組件B',
}
}
}
</script>
<style scoped>
h1{
color: yellow;
}
</style>
- C代碼
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'ComponentC',
data(){
return{
msg:'這是組件C',
}
}
}
</script>
<style scoped>
h1{
color:blue;
}
</style>
三個組件構建完成之后，我們修改App.vue，在這里我們引入我們定義的三個組件，實體代碼如下:
<template>
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
</template>
<script>
export default {
name: 'App',
components: {
"ComponentA": () => import("@/components/ComponentA"),
"ComponentB": () => import("@/components/ComponentB"),
"ComponentC": () => import("@/components/ComponentC")
}
}
</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>
運行效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/340774.html
標籤：其他