这个教程只是给我妹妹写的课外作业，并没有太多高级东西，只适合于有点前端基础的小白，
忠于兴趣，诚待文字，取悦自己，理解他人。
01-- 项目准备
01-1 安装
1兼容性 ：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
2直接用 <script> 引入：
3[CDN]https://cn.vuejs.org/v2/guide/installation.html#CDN "CDN"对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
</script>
你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。
4NPM在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
# vue版本号
$ npm install vue@vue版本号
没有环境的可以参考
既然我们要用npm装包就需要一个package.json 来记录存放第三方包的依赖
# 创建一个空的文件夹
$ mkdir vue-maer
$ cd vue-maer
# 然后，调用 npm init 来初始化 package.json，
# 参数 -y 表示对 npm 要求提供的信息，都自动按下回车键，表示接受默认值
$ npm init -y
基础规范，我们的项目最好不要用中文命名
#i 是 install 的缩写
$ npm i vue
01-2使用vueCLI创建项目
$ vue create vue-admin
------------
# 第一步：选择创捷模式
Vue CLI v3.9.1
┌───────────────────────────┐
│ Update available: 4.2.2 │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
# 默认自动选择模式
default (babel, eslint)
#手动选择模式
> 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转化为ECMAScript5的一个工具
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router #vue初始路由
( ) Vuex
(*) CSS Pre-processors #css预处理器
(*) Linter / Formatter #代码校验格式化
( ) Unit Testing
( ) E2E Testing
------------
# 第三步--使用路由模式（history）
? Use history mode for router? (Requires proper server setup for index fallback in production)
(Y/n) n
------------
# 第四步--选择css预处理器
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
------------
# 第五步--选择代码验证格式风格
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
------------
# 第六步--选择代码校验方式
? Pick additional lint features:
>(*) Lint on save 文档保存的时候，会进行格式验证
(*) Lint and fix on commit 在进行git commit 时候，会进行代码校验，并且尝试自动解决错误语法
------------
# 第七步--选择配置注册
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
> In dedicated config files 独立配置文件
In package.json 注册到package.json当中。但维护比较麻烦
------------
# 第八步--是否进行模板化
? Save this as a preset for future projects? (y/N) n
将此保存为将来项目的预设？（是/否）否
#根据提示进行启动项目
$ cd vue-admin
$ npm run serve
2020年2月2日更新
01-3目录结构
├── README.md 项目介绍
├── index.html 入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录，这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据（state）
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源，不会被wabpack构建。
└── test 测试文件目录（unit&e2e）
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测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({ //创建vue实例
router, //绑定路由
render: h => h(App)// 将app根主件
}).$mount('#app')//替换到页面的#app节点上
- 在入口模块中
- 加载根组件
- 加载路由
- 创建vue实例
- 根据组件替换到页面中
#app节点
01-5 git版本控制
git的基本使用就不在这里讲述了有兴趣的请看git 连接远程仓库如有疑问请联系我
我就描述项目过程：
#拷贝项目到本地
git clone [email protected]:dileigege/dileigege-vue-admin.git
#将隐藏文件git 复制到项目
git add .
git status
git commit -m "提交日志-初始化"
#项目就我一个人，所以我就用主分支
git push
2020年3月10日更新
最近接了项目，就停更了。项目今天后继续更新
01-6 目录整合
① App.vue 调整
切记由于我们的项目使用了 eslintrc所以我们必须按照规范写，也许这个你觉的很麻烦，但是你可知道你不规范代码可能增加伙伴的工作。eslintrc
<!-- -->
<template>
<div></div>
</template>
<script>
export default {
name: 'app',
data() {
return {}
}
}
</script>
<style lang='less' scoped>
</style>
② views components文件夹内的文件，清空不需要了
③router路由调整（用我们自己的项目需求调整）
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes
})
export default router
④项目目录补充
- api目录 接口封装模块
- directive 指令目录
- filters 过滤器目录
- store 状态容器模块
- styles 样式目录
- utils 工具模块
⑤引用静态文件将图片资源放置 assets , public中，引用字体文件在public - index.html中
2020年3月12日更新
01-7 导入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"
},
为了更好的食用，请按照个人项目进行.eslintrc.js可以参考食用
1ESLint 配置文件 .eslintrc 示例及说明
2错误提示
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']
}
}
你可以引入整个 Element，在main.js 中写入以下内容：完整内容，
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>危险按钮</el-button>
</el-row>
</div>
</template>
2020年3月13日更新
02项目开始
02-1登陆板块
主要步骤：页面布局 验证码 提交登陆 表单验证
我们的项目主要是应用Element，但在一些项目中，UI给我们的设计图，ElementUI并不能满足，所以我们就需要做一些调整
02-1-1 画UI
本人不是专业UI，所以能看就行，请专业的不喜勿喷，都是公司的压迫层，更应该相亲相爱，毕竟我们可能是唯一理解你们“五彩斑斓黑”的人
02-1-2 登陆组件及路由配置
首先我们先在view文件夹创建两个组件模块，Login - index.vue home - index.vue 这里的view可以狭义的理解为 mvc中的视图层，MVC是后端世界中一种经典的设计模式，全名为Model-View-Controller，即模型-视图-控制器，去过vue官网几次的人就知道，vue的设计模式是MvvM，有点多了，我们专注项目。
3-0对vue核心的理解 MVVM
文件router-inde.js首页路由和登陆页路由
const routes = [
{
name: 'home',
path: '/',
component: () => import('@/views/home')
},
{
name: 'login',
path: '/login',
component: () => import('@/views/login')
}
]
app.vue调用路由组件
<template>
<div>
<router-view/> 调用组件
</div>
</template>
02-1-3 页面编写
login-index.vue页面 表单组件
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<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="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" 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="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</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框架给的样式，不符合样式的我们可以进行调整，效率在我们的工作中也很重要。
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;
}
// 清除浮动
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'
样式就大家想怎么写就怎么写吧，如果样式写不了，我建议你去再学学，HTML+css吧，虽然说这两个宝贝并不难，但也并不简单，
2020年3月21日更新
02-1-4 验证码操作
<!-- @click="ongaincode" -->
<el-button round class="button-fler" @click="ongaincode">
获取验证码
</el-button>
import axios from 'axios';
methods: {
onSubmit () {
//提交按钮触发
console.log('submit!');
},
ongaincode () {
// console.log('ongaincode!');
//验证码按钮触发
axios({
method: 'GET',
url: '接口，可用yapi模拟，'
}).then(res => {
console.log(res.data)
})
}
}
返回数据，可以使用
当然一个真实的验证中，我们可以使用一些验证工作，我们可以使用后端写的验证规则，也可以使用一些工具，为了保证我们的手机号，不会被恶意强刷，造成一些没有必要的损失。
2020年3月25日更新
02-1-5 验证码操作
styl逻辑
//在data中添加定时器与定位时间
codeTime: null,
codeNumer: 20
//在methods内添加 验证码倒计时
countDown() {
// console.log("验证码倒计时")
this.codeTime = window.setInterval(() => {
this.codeNumer--;
if (this.codeNumer <= 0) {
// 清除定时器
window.clearInterval(this.codeTime);
//定时器 还原
(this.codeNumer = 20), (this.codeTime = null);
}
}, 1000);
}
html样式
<!-- !!codeTime 返回为布尔，定时器为数字 一个！为ture 两个取反 -->
!!codeTime
<el-button
round
class="button-fler"
@click="ongaincode"
:disabled="!!codeTime"
>{{ codeTime ? `剩余${codeNumer}秒`: '获取验证码'}}</el-button>
</el-col>
2020年3月28日更新
02-2-1 Layout布局
按照正常程序的话下一步应该是路由守卫,但是考虑到每次都登陆太麻烦了,so就先不布局,然后最后写路由守卫
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',
//注册 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路由进行注册
{
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>