这个教程只是给我妹妹写的课外作业,并没有太多高级东西,只适合于有点前端基础的小白,
忠于兴趣,诚待文字,取悦自己,理解他人。
01-- 项目准备
01-1 安装
1兼容性 :Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
2直接用 引入:
- 开发版本:https://cn.vuejs.org/js/vue.js
- 生产版本:https://cn.vuejs.org/js/vue.min.js
3[CDN]https://cn.vuejs.org/v2/guide/installation.html#CDN "CDN"对于制作原型或学习,你可以这样使用最新版本:
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:
如果你使用原生 ES Modules,这里也有一个兼容 ES Module 的构建文件:
你可以在 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
to select, to toggle all, 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
git@github.com: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
④项目目录补充
- 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
圆角按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 App.vue2020年3月13日更新
02项目开始
02-1登陆板块
主要步骤:页面布局 验证码 提交登陆 表单验证
我们的项目主要是应用Element,但在一些项目中,UI给我们的设计图,ElementUI并不能满足,所以我们就需要做一些调整02-1-1 画UI
image.png本人不是专业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页面
表单组件
- 立即创建 取消 既然UI框架给了我们样式,我们就使用UI框架给的样式,不符合样式的我们可以进行调整,效率在我们的工作中也很重要。
style-style.less
ANDmain.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 验证码操作
模拟接口
获取验证码 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
{{ codeTime ? `剩余${codeNumer}秒`: '获取验证码'}} 2020年3月28日更新
02-2-1 Layout布局
按照正常程序的话下一步应该是路由守卫,但是考虑到每次都登陆太麻烦了,so就先不布局,然后最后写路由守卫
view - Layout - index
Main Footer
view - Layout - comments - layHeader.vue
layheader组件
view - Layout - comments - layTopnav.vue
layTopnav.vue组件在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)
使用