这个教程只是给我妹妹写的课外作业，并没有太多高级东西，只适合于有点前端基础的小白，
忠于兴趣，诚待文字，取悦自己，理解他人。
01-- 项目准备
01-1 安装
1兼容性 ：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： 如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件： 你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。 4NPM在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。 没有环境的可以参考 基础规范，我们的项目最好不要用中文命名 2020年2月2日更新 2020年2月4日更新 git的基本使用就不在这里讲述了有兴趣的请看git 连接远程仓库如有疑问请联系我 ① ② ④项目目录补充 ⑤引用静态文件将图片资源放置 2020年3月12日更新 npm 安装 为了更好的食用，请按照个人项目进行 1ESLint 配置文件 .eslintrc 示例及说明 你可以引入整个 Element，在 2020年3月13日更新 主要步骤：页面布局 验证码 提交登陆 表单验证 本人不是专业UI，所以能看就行，请专业的不喜勿喷，都是公司的压迫层，更应该相亲相爱，毕竟我们可能是唯一理解你们“五彩斑斓黑”的人 首先我们先在 既然UI框架给了我们样式，我们就使用UI框架给的样式，不符合样式的我们可以进行调整，效率在我们的工作中也很重要。 样式就大家想怎么写就怎么写吧，如果样式写不了，我建议你去再学学，HTML+css吧，虽然说这两个宝贝并不难，但也并不简单， 2020年3月21日更新 模拟接口 返回数据，可以使用 当然一个真实的验证中，我们可以使用一些验证工作，我们可以使用后端写的验证规则，也可以使用一些工具，为了保证我们的手机号，不会被恶意强刷，造成一些没有必要的损失。 styl逻辑 html样式 2020年3月28日更新 按照正常程序的话下一步应该是路由守卫,但是考虑到每次都登陆太麻烦了,so就先不布局,然后最后写路由守卫 在router.js路由进行注册 2020年4月1日更新 ** 安装 v-charts ** 完整使用： 使用
2直接用
# 最新稳定版
$ 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 #根据提示进行启动项目
$ cd vue-admin
$ npm run serve
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
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节点上
#app节点01-5 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
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
assets , public中，引用字体文件在public - index.html中01-7 导入Element
推荐使用 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可以参考食用
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']
}
}
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
02项目开始
02-1登陆板块
我们的项目主要是应用Element，但在一些项目中，UI给我们的设计图，ElementUI并不能满足，所以我们就需要做一些调整02-1-1 画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调用路由组件
02-1-3 页面编写
login-index.vue页面 表单组件
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'
02-1-4 验证码操作
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 验证码操作
//在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);
}
!!codeTime
02-2-1 Layout布局
view - Layout - index
view - Layout - comments - layHeader.vue
view - Layout - comments - layTopnav.vue
{
name: 'Layout',
path: '/',
component: () => import('@/views/Layout')
},
02-2-2 首页布局
npm i v-charts echarts -S
main.js// 使用v-charts
import VCharts from 'v-charts'
// 引用全部VCharts
Vue.use(VCharts)