前端_JavaScript_Vue
Tips
(1)项目仪表盘
在Vue-cli中,内置项目仪表盘 在本地文件中$vue ui打开
(2)创建项目
$yarn global add @vue/cli $ vue ui
vue-router
在SPA中,路由是组件之间的切换,路由模块的本质是建立组件与页面之间的映射关系.SPA的路由是只更新视图而不重新请求页面.根据mode参数不同可以选择Hash模式和History模式.
Hash模式:默认模式,通过锚点值的改变,根据不同的值,渲染指定的DOM位置不同的数据.原理是通过onhaschange事件,监听Hash值的变化.History模式:路由配置规则,添加"mode:'history'"
//main.js
const router = new VueRouter ({
mode: 'history',
routes:[....]
})
环境搭建
环境搭建:Windows 10 专业版 + Node.js + NPM + Google Chrome + $npm i -g @vue/cli
项目创建:$vue create demo + $cd demo + $yarn serve + $vue ui
Vue CLI 3 提供图形化界面,提供插件,Vue CLI有几个独立的部分组成:CLI是一个全局安装的npm包,提供终端的Vue命令.CLI服务是一个开发环境依赖,一个npm包,局部安装在每个@vue/cli创建的项目中,包含加载其他CLI插件的核心服务,一个优化过的内部webpack配置,项目内部的vu-cli-service命令,提供serve,build和Inspect命令.
项目结构
├── node_modules # 项目依赖包目录├── public│ ├── favicon.ico # ico图标│ └── index.html # 首页模板├── src │ ├── assets # 样式图片目录│ ├── components # 组件目录│ ├── views # 页面目录│ ├── App.vue # 父组件│ ├── main.js # 入口文件│ ├── router.js # 路由配置文件│ └── store.js # vuex状态管理文件├── .gitignore # git忽略文件├── .postcssrc.js # postcss配置文件├── babel.config.js # babel配置文件├── package.json # 包管理文件└── yarn.lock # yarn依赖信息文件
- CLI插件是向你的Vue项目提供可选的功能的npm包.起步: $yarn global add@vue/cli $vue create vuecli $vue ui列表项目
- 快速原型开发,使用vue serve和vue build命令对单个*.vue文件进行快速原型开发,先$npm install -g @vue/cli-service-global目
- vue serve 命令可以在零配置下为.js或.vue文件启动一个服务器 $serve -o;打开浏览器 $serve -c; 将本地URL复制到剪切板 $serve -h;帮助 例子:$vue serve hello.vue
- vue build $build -t;构建目标 $build -n;库的名字 $build -d;输出目录 $build -h;输出用法信息 例子:$vue vue build hello.vue
插件和Preset
每个CLI插件都会包含一个(用于创建文件的)生成器和一个(用来调整webpack核心配置和注入命令的)运行时插件
$vue add @vue/eslint
Vue CLI Preset是一个包含新项目所需要预定义选项的插件的JSON对象,让用户无需在命令提示中选择它们.
vue-cli-service serve --open 在浏览器启动时打开浏览器 vue-cli-service serve --copy 在浏览器启东时讲URL复制到剪切板 vue-cli-service serve --mode 指定环境模式(默认值development) vue-cli-service serve --host 指定host vue-cli-service build --mode 指定环境模式 Vue Devtools
## Vue学习顺序 ##
- 扎实的HTML/CSS/JavaScript基本功.
- 跟随官方教程基础篇/进阶篇.
- NVM/Node.js/Vue-cli/Vue-Router/Vuex
Mock.js的使用
安装Mock.js $npm i Mockjs -s 在main.js的同级目录下创建一个Mock.js
const Mock = require('mockjs')Mock.mock('/register', function (options) {console.log(options)return Mock.mock({'number': '1'})
})
在main.js中引用: require('./mock')
Vue基础
Vue.js是一套构建用户界面的的渐进式框架,可以自定向上逐层应用.
前端_JavaScript_Vue相关推荐
- etcd 笔记(02)— etcd 安装(apt 或 yum 安装 、二进制包安装、Docker 安装 etcd、etcd 前端工具etcdkeeper)
1. 使用 apt 或 yum 安装 etcd 命令如下: sudo apt-get install etcd 或者 sudo yum install etcd 这样安装的缺点是:安装的 etcd 版 ...
- 【牛腩新闻发布系统】开始前端03
前言: 后台代码写好后,开始按照设计实现前端,之前有做过关于网页的东西,不过是用Dreamweaver做的静态,不能实现和数据库的交互,如果只是单纯学界面设计的话,用Dreamweaver容易上手,在 ...
- LLVM Clang前端编译与调试
LLVM Clang前端编译与调试 iOS 关于编译 o 一.Objective-C 编译过程 o 为什么需要重新编译? o 编译步骤 o 二.编译步骤的详细说明 o 1.预处理 o 2.编译 o 词 ...
- Clang:LLVM 的 C 语言家族前端
Clang:LLVM 的 C 语言家族前端 Clang 项目为LLVM 项目的 C 语言家族(C.C++.Objective C/C++.OpenCL.CUDA 和 RenderScript)中,提供 ...
- TensorFlow Frontend前端
TensorFlow Frontend前端 TensorFlow前端有助于将TensorFlow模型导入TVM. Supported versions: • 1.12 and below Tested ...
- Clang:LLVM的C语言家族前端
Clang:LLVM的C语言家族前端 Clang项目为LLVM 项目的C语言家族(C,C ++,Objective C / C ++,OpenCL,CUDA和RenderScript)中的语言提供了语 ...
- 前端的单页面模式和多页面模式
一.前言 前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互, 而项目内的页面交互,不可避免的需要相互之间的数据共享. 这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享 ...
- JavaScript—— 前端编程语言
JavaScript 前端编程语言 http://caibaojian.com/javascript/ 转载于:https://www.cnblogs.com/highpointengineer/ ...
- day44前端开发1之html基础
web前端开发1 一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体 标签: ...
最新文章
- Use PowerShell to Replace netdom Commands to Join the Domain
- 考研英语一2011年真题模考总结
- 华数大数据平台解决方案
- 达摩院文档级关系抽取新SOTA和零样本关系抽取新任务
- ES6新增数据类型符号(2):共享符号与知名符号
- php 小数点 乘法,js小数点数字相乘、把小数点四舍五入保留两位小数
- mysql存储引擎的区别_Mysql的两种存储引擎以及区别
- 云 文件 服务器 只存,云 文件 服务器只存
- 怎么用计算机打出来自天堂的恶魔呢,来自天堂的恶魔
- 东北育才10天大总结
- hadoop学习资源与路线图
- 计算机网络知识点全面总结,图文并茂,方便大家学习
- OpenCV角点检测源代码分析(Harris和ShiTomasi角点)
- Angular 入门教程系列:39:使用ng-alain进行开发
- Alfresco 4.0安装手把手教程
- Unity 3d 子弹的瞄准、旋转与移动
- 汽车专场 | 新能源汽车动力电池PACK CAE分析实例解读
- 【山外笔记-工具框架】SVN版本控制系统
- Nwafu-OJ-1417 Problem O C语言实习题三——5.图形输出
- 万能商标--“35类”