vue.js
這個(gè)教程只是給我妹妹寫的課外作業(yè)，并沒有太多高級(jí)東西，只適合于有點(diǎn)前端基礎(chǔ)的小白购撼，
忠于興趣跪削，誠待文字，取悅自己迂求，理解他人碾盐。
01-- 項(xiàng)目準(zhǔn)備
01-1 安裝
1兼容性 ：Vue 不支持 IE8 及以下版本，因?yàn)?Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性揩局。但它支持所有兼容 ECMAScript 5 的瀏覽器毫玖。
2直接用 <script> 引入：
- 開發(fā)版本：https://cn.vuejs.org/js/vue.js
- 生產(chǎn)版本：https://cn.vuejs.org/js/vue.min.js
3[CDN]https://cn.vuejs.org/v2/guide/installation.html#CDN "CDN"對(duì)于制作原型或?qū)W習(xí)，你可以這樣使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
對(duì)于生產(chǎn)環(huán)境谐腰，我們推薦鏈接到一個(gè)明確的版本號(hào)和構(gòu)建文件孕豹，以避免新版本造成的不可預(yù)期的破壞：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
如果你使用原生 ES Modules涩盾，這里也有一個(gè)兼容 ES Module 的構(gòu)建文件：
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>
你可以在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼十气。
4NPM在用 Vue 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝[1]。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用春霍。同時(shí) Vue 也提供配套工具來開發(fā)單文件組件砸西。
# 最新穩(wěn)定版
$ npm install vue
# vue版本號(hào)
$ npm install vue@vue版本號(hào)
沒有環(huán)境的可以參考
既然我們要用npm裝包就需要一個(gè)package.json 來記錄存放第三方包的依賴
# 創(chuàng)建一個(gè)空的文件夾
$ mkdir vue-maer
$ cd vue-maer
# 然后，調(diào)用 npm init 來初始化 package.json址儒，
# 參數(shù) -y 表示對(duì) npm 要求提供的信息芹枷，都自動(dòng)按下回車鍵，表示接受默認(rèn)值
$ npm init -y
基礎(chǔ)規(guī)范莲趣，我們的項(xiàng)目最好不要用中文命名
#i 是 install 的縮寫
$ npm i vue
01-2使用vueCLI創(chuàng)建項(xiàng)目
$ vue create vue-admin
------------
# 第一步：選擇創(chuàng)捷模式
Vue CLI v3.9.1
┌───────────────────────────┐
│ Update available: 4.2.2 │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
# 默認(rèn)自動(dòng)選擇模式
default (babel, eslint)
#手動(dòng)選擇模式
> Manually select features
------------
# 第二步
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel #將ECMAScript6轉(zhuǎn)化為ECMAScript5的一個(gè)工具
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router #vue初始路由
( ) Vuex
(*) CSS Pre-processors #css預(yù)處理器
(*) Linter / Formatter #代碼校驗(yàn)格式化
( ) Unit Testing
( ) E2E Testing
------------
# 第三步--使用路由模式（history）
? Use history mode for router? (Requires proper server setup for index fallback in production)
(Y/n) n
------------
# 第四步--選擇css預(yù)處理器
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
> Less
Stylus
------------
# 第五步--選擇代碼驗(yàn)證格式風(fēng)格
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
------------
# 第六步--選擇代碼校驗(yàn)方式
? Pick additional lint features:
>(*) Lint on save 文檔保存的時(shí)候鸳慈，會(huì)進(jìn)行格式驗(yàn)證
(*) Lint and fix on commit 在進(jìn)行g(shù)it commit 時(shí)候，會(huì)進(jìn)行代碼校驗(yàn)喧伞，并且嘗試自動(dòng)解決錯(cuò)誤語法
------------
# 第七步--選擇配置注冊(cè)
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
> In dedicated config files 獨(dú)立配置文件
In package.json 注冊(cè)到package.json當(dāng)中走芋。但維護(hù)比較麻煩
------------
# 第八步--是否進(jìn)行模板化
? Save this as a preset for future projects? (y/N) n
將此保存為將來項(xiàng)目的預(yù)設(shè)？（是/否）否
安裝成功
#根據(jù)提示進(jìn)行啟動(dòng)項(xiàng)目
$ cd vue-admin
$ npm run serve
項(xiàng)目啟動(dòng)
瀏覽器項(xiàng)目啟動(dòng)
2020年2月2日更新
01-3目錄結(jié)構(gòu)
├── README.md 項(xiàng)目介紹
├── index.html 入口頁面
├── build 構(gòu)建腳本目錄
│ ├── build-server.js 運(yùn)行本地構(gòu)建服務(wù)器潘鲫，可以訪問構(gòu)建后的頁面
│ ├── build.js 生產(chǎn)環(huán)境構(gòu)建腳本
│ ├── dev-client.js 開發(fā)服務(wù)器熱重載腳本翁逞，主要用來實(shí)現(xiàn)開發(fā)階段的頁面自動(dòng)刷新
│ ├── dev-server.js 運(yùn)行本地開發(fā)服務(wù)器
│ ├── utils.js 構(gòu)建相關(guān)工具方法
│ ├── webpack.base.conf.js wabpack基礎(chǔ)配置
│ ├── webpack.dev.conf.js wabpack開發(fā)環(huán)境配置
│ └── webpack.prod.conf.js wabpack生產(chǎn)環(huán)境配置
├── config 項(xiàng)目配置
│ ├── dev.env.js 開發(fā)環(huán)境變量
│ ├── index.js 項(xiàng)目配置文件
│ ├── prod.env.js 生產(chǎn)環(huán)境變量
│ └── test.env.js 測(cè)試環(huán)境變量
├── mock mock數(shù)據(jù)目錄
│ └── hello.js
├── package.json npm包配置文件，里面定義了項(xiàng)目的npm腳本溉仑，依賴包等信息
├── src 源碼目錄
│ ├── main.js 入口js文件
│ ├── app.vue 根組件
│ ├── components 公共組件目錄
│ │ └── title.vue
│ ├── assets 資源目錄挖函，這里的資源會(huì)被wabpack構(gòu)建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 應(yīng)用級(jí)數(shù)據(jù)（state）
│ │ └── index.js
│ └── views 頁面目錄
│ ├── hello.vue
│ └── notfound.vue
├── static 純靜態(tài)資源，不會(huì)被wabpack構(gòu)建浊竟。
└── test 測(cè)試文件目錄（unit&e2e）
└── unit 單元測(cè)試
├── index.js 入口腳本
├── karma.conf.js karma配置文件
└── specs 單測(cè)case目錄
└── Hello.spec.js
2020年2月4日更新
01-4 入口模型
- 找到
main.js入口模型
import Vue from 'vue'
import App from './App.vue'
import router from './router' //加載路由
Vue.config.productionTip = false
new Vue({ //創(chuàng)建vue實(shí)例
router, //綁定路由
render: h => h(App)// 將app根主件
}).$mount('#app')//替換到頁面的#app節(jié)點(diǎn)上
- 在入口模塊中
- 加載根組件
- 加載路由
- 創(chuàng)建vue實(shí)例
- 根據(jù)組件替換到頁面中
#app節(jié)點(diǎn)
01-5 git版本控制
git的基本使用就不在這里講述了有興趣的請(qǐng)看git 連接遠(yuǎn)程倉庫如有疑問請(qǐng)聯(lián)系我
我就描述項(xiàng)目過程：
創(chuàng)建項(xiàng)目
#拷貝項(xiàng)目到本地
git clone git@github.com:dileigege/dileigege-vue-admin.git
#將隱藏文件git 復(fù)制到項(xiàng)目
git add .
git status
git commit -m "提交日志-初始化"
#項(xiàng)目就我一個(gè)人怨喘，所以我就用主分支
git push
項(xiàng)目保存到遠(yuǎn)程倉庫
2020年3月10日更新
最近接了項(xiàng)目，就停更了振定。項(xiàng)目今天后繼續(xù)更新
01-6 目錄整合
① App.vue 調(diào)整
切記由于我們的項(xiàng)目使用了 eslintrc所以我們必須按照規(guī)范寫哲思，也許這個(gè)你覺的很麻煩，但是你可知道你不規(guī)范代碼可能增加伙伴的工作吩案。eslintrc
<!-- -->
<template>
<div></div>
</template>
<script>
export default {
name: 'app',
data() {
return {}
}
}
</script>
<style lang='less' scoped>
</style>
② views components文件夾內(nèi)的文件棚赔，清空不需要了
③router路由調(diào)整（用我們自己的項(xiàng)目需求調(diào)整）
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes
})
export default router
④項(xiàng)目目錄補(bǔ)充
- api目錄 接口封裝模塊
- directive 指令目錄
- filters 過濾器目錄
- store 狀態(tài)容器模塊
- styles 樣式目錄
- utils 工具模塊
⑤引用靜態(tài)文件將圖片資源放置 assets , public中，引用字體文件在public - index.html中
2020年3月12日更新
01-7 導(dǎo)入Element
npm 安裝
推薦使用 npm 的方式安裝，它能更好地和 webpack打包工具配合使用靠益。
npm i element-ui -S
---安裝成功--
dependencies": {
"core-js": "^3.6.4",
"element-ui": "^2.13.0",
"vue": "^2.6.11",
"vue-router": "^3.1.5"
},
為了更好的食用丧肴，請(qǐng)按照個(gè)人項(xiàng)目進(jìn)行.eslintrc.js可以參考食用
1ESLint 配置文件 .eslintrc 示例及說明
2錯(cuò)誤提示
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
"space-before-function-paren": 0,
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"space-before-function-paren": ["error", {
"anonymous": "always",
"named": "always",
"asyncArrow": "always"
}],
'semi':['err','always']
}
}
你可以引入整個(gè) Element，在main.js 中寫入以下內(nèi)容：完整內(nèi)容胧后，
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 完整引用Element
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
App.vue頁面添加Element
<template>
<div>
<el-row>
<el-button round>圓角按鈕</el-button>
<el-button type="primary" round>主要按鈕</el-button>
<el-button type="success" round>成功按鈕</el-button>
<el-button type="info" round>信息按鈕</el-button>
<el-button type="warning" round>警告按鈕</el-button>
<el-button type="danger" round>危險(xiǎn)按鈕</el-button>
</el-row>
</div>
</template>
App.vue
2020年3月13日更新
02項(xiàng)目開始
02-1登陸板塊
主要步驟：頁面布局 驗(yàn)證碼 提交登陸 表單驗(yàn)證
我們的項(xiàng)目主要是應(yīng)用Element芋浮，但在一些項(xiàng)目中，UI給我們的設(shè)計(jì)圖壳快，ElementUI并不能滿足纸巷，所以我們就需要做一些調(diào)整
02-1-1 畫UI
image.png
本人不是專業(yè)UI，所以能看就行眶痰，請(qǐng)專業(yè)的不喜勿噴瘤旨，都是公司的壓迫層，更應(yīng)該相親相愛竖伯，畢竟我們可能是唯一理解你們“五彩斑斕黑”的人
02-1-2 登陸組件及路由配置
首先我們先在view文件夾創(chuàng)建兩個(gè)組件模塊存哲，Login - index.vue home - index.vue 這里的view可以狹義的理解為 mvc中的視圖層，MVC是后端世界中一種經(jīng)典的設(shè)計(jì)模式七婴，全名為Model-View-Controller祟偷，即模型-視圖-控制器，去過vue官網(wǎng)幾次的人就知道打厘，vue的設(shè)計(jì)模式是MvvM修肠，有點(diǎn)多了，我們專注項(xiàng)目户盯。
3-0對(duì)vue核心的理解 MVVM
文件router-inde.js首頁路由和登陸頁路由
const routes = [
{
name: 'home',
path: '/',
component: () => import('@/views/home')
},
{
name: 'login',
path: '/login',
component: () => import('@/views/login')
}
]
app.vue調(diào)用路由組件
<template>
<div>
<router-view/> 調(diào)用組件
</div>
</template>
02-1-3 頁面編寫
login-index.vue頁面 表單組件
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活動(dòng)名稱">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活動(dòng)區(qū)域">
<el-select v-model="form.region" placeholder="請(qǐng)選擇活動(dòng)區(qū)域">
<el-option label="區(qū)域一" value="shanghai"></el-option>
<el-option label="區(qū)域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活動(dòng)時(shí)間">
<el-col :span="11">
<el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="選擇時(shí)間" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即時(shí)配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活動(dòng)性質(zhì)">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐廳線上活動(dòng)" name="type"></el-checkbox>
<el-checkbox label="地推活動(dòng)" name="type"></el-checkbox>
<el-checkbox label="線下主題活動(dòng)" name="type"></el-checkbox>
<el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊資源">
<el-radio-group v-model="form.resource">
<el-radio label="線上品牌商贊助"></el-radio>
<el-radio label="線下場(chǎng)地免費(fèi)"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活動(dòng)形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
既然UI框架給了我們樣式嵌施，我們就使用UI框架給的樣式，不符合樣式的我們可以進(jìn)行調(diào)整先舷，效率在我們的工作中也很重要艰管。
style-style.less AND main.js
/*
* @description: 公共樣式
* @param : NO
* @return: NO
*/
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
margin: 0;
padding: 0;
}
// 清除浮動(dòng)
clearfix {
*zoom: 1;
/*ie*/
&::after,
&::before {
content: '';
display: table;
}
&::after {
clear: both;
}
}
// .box7 {
// @extend %clearfix;
// }
html , body {
height: 100%;
}
在main.js中添加
import './styles/style.less'
樣式就大家想怎么寫就怎么寫吧，如果樣式寫不了蒋川，我建議你去再學(xué)學(xué)牲芋，HTML+css吧，雖然說這兩個(gè)寶貝并不難捺球，但也并不簡單缸浦，
2020年3月21日更新
02-1-4 驗(yàn)證碼操作
<!-- @click="ongaincode" -->
<el-button round class="button-fler" @click="ongaincode">
獲取驗(yàn)證碼
</el-button>
import axios from 'axios';
methods: {
onSubmit () {
//提交按鈕觸發(fā)
console.log('submit!');
},
ongaincode () {
// console.log('ongaincode!');
//驗(yàn)證碼按鈕觸發(fā)
axios({
method: 'GET',
url: '接口，可用yapi模擬氮兵，'
}).then(res => {
console.log(res.data)
})
}
}
返回?cái)?shù)據(jù)裂逐，可以使用
當(dāng)然一個(gè)真實(shí)的驗(yàn)證中，我們可以使用一些驗(yàn)證工作泣栈，我們可以使用后端寫的驗(yàn)證規(guī)則卜高，也可以使用一些工具弥姻，為了保證我們的手機(jī)號(hào)，不會(huì)被惡意強(qiáng)刷掺涛，造成一些沒有必要的損失庭敦。
2020年3月25日更新
02-1-5 驗(yàn)證碼操作
styl邏輯
//在data中添加定時(shí)器與定位時(shí)間
codeTime: null,
codeNumer: 20
//在methods內(nèi)添加 驗(yàn)證碼倒計(jì)時(shí)
countDown() {
// console.log("驗(yàn)證碼倒計(jì)時(shí)")
this.codeTime = window.setInterval(() => {
this.codeNumer--;
if (this.codeNumer <= 0) {
// 清除定時(shí)器
window.clearInterval(this.codeTime);
//定時(shí)器 還原
(this.codeNumer = 20), (this.codeTime = null);
}
}, 1000);
}
html樣式
<!-- !!codeTime 返回為布爾，定時(shí)器為數(shù)字 一個(gè)薪缆！為ture 兩個(gè)取反 -->
!!codeTime
<el-button
round
class="button-fler"
@click="ongaincode"
:disabled="!!codeTime"
>{{ codeTime ? `剩余${codeNumer}秒`: '獲取驗(yàn)證碼'}}</el-button>
</el-col>
2020年3月28日更新
02-2-1 Layout布局
按照正常程序的話下一步應(yīng)該是路由守衛(wèi),但是考慮到每次都登陸太麻煩了,so就先不布局,然后最后寫路由守衛(wèi)
view - Layout - index
<template>
<el-container>
<el-header>
<layHeader/>
</el-header>
<el-main>
<layTopnav/>
Main
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</template>
<script>
// 引入子組件
import layTopnav from './comments/layTopnav';
import layHeader from './comments/layHeader';
export default {
name: 'app',
//注冊(cè) layTopnav layHeader
components: {
layTopnav,
layHeader
},
data() {
return {}
}
}
</script>
<style lang='less' scoped>
.el-container{
width: 100%;
.el-header{
background-color: #2375FF;
}
.el-main{
background-color: #ffffff;
}
.el-footer{
position:absolute;
width: 100%;
background-color: #333333;
bottom: 0;
}
}
</style>
view - Layout - comments - layHeader.vue
<template>
<div>
layheader組件
</div>
</template>
<script>
export default {
name: 'layHeader',
data() {
return {}
}
}
</script>
<style lang='less' scoped>
</style>
view - Layout - comments - layTopnav.vue
<template>
<div>
layTopnav.vue組件
</div>
</template>
<script>
export default {
name: 'layTopnav',
data() {
return {}
}
}
</script>
<style lang='less' scoped>
</style>
在router.js路由進(jìn)行注冊(cè)
{
name: 'Layout',
path: '/',
component: () => import('@/views/Layout')
},
2020年4月1日更新
02-2-2 首頁布局
** 安裝 v-charts **
npm i v-charts echarts -S
完整使用：main.js
// 使用v-charts
import VCharts from 'v-charts'
// 引用全部VCharts
Vue.use(VCharts)
使用
<template>
<ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
</template>
<script>
export default {
data () {
this.chartSettings = {
roseType: 'radius'
}
return {
chartData: {
columns: ['日期', '訪問用戶'],
rows: [
{ '日期': '1/1', '訪問用戶': 1393 },
{ '日期': '1/2', '訪問用戶': 3530 },
{ '日期': '1/3', '訪問用戶': 2923 },
{ '日期': '1/4', '訪問用戶': 1723 },
{ '日期': '1/5', '訪問用戶': 3792 },
{ '日期': '1/6', '訪問用戶': 4593 }
]
}
}
}
}
</script>
