Vue 从零开始，项目搭建以及一些使用经验
Vue 官方文档 : https://cn.vuejs.org/v2/guide/components.html
1.安装 node.js
https://nodejs.org/zh-cn/
2.【方法一】yarn 的安装，并使用 yarn 安装 vue
Yarn是facebook发布的一款取代npm的包管理工具。
- 下载node.js，使用npm安装
npm install -g yarn - 查看版本：
yarn --version - Yarn 淘宝源安装
yarn config set registry https://registry.npm.taobao.org -g yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g - yarn 安装 vue
yarn global add vue - yarn 安装 vue-cli
yarn global add vue-cli
3.【方法二】npm 的换源，并使用 npm 安装 vue
- npm 换源
npm config set registry https://registry.npm.taobao.org - npm 安装 vue
npm install vue -g - npm 安装 vue-cli
npm install vue-cli -g
4.创建项目
vue init webpack 项目名
Project name 项目名 (不要大写)
Project description 项目描述 (默认回车就行)
Author (会默认显示你的用户,默认回车就行)
Vue build (有两个选项,默认回车第一个就行)
Install vue-router (Y/n) (输入 y, 回车)
Use ESLint to lint your code? (Y/n) (输入 n, 回车)
Set up unit tests (Y/n) (输入 n, 回)
Setup e2e tests with Nightwatch? (Y/n) (输入 n, 回)
Should we run ‘npm install’ for you after the project has been created? (两个选项,选择 yarn,前提是之前的步骤你安装了 yarn)
6.进入项目根路径启动项目
cd 项目名
npm run dev
以下在项目根路径执行
7.安装 webpack
yarn add vue webpack
8.安装 webpack-cli
yarn add webpack-cli -D
（ 如果你用的webpack4.XX版本就一定要装 webpack-cli ，否则会报错）
webpack4 会有许多不兼容，建议卸载并下载安装指定版本
卸载命令：
npm uninstall webpack -g
npm uninstall webpack-dev-server -g
指定版本下载：
yarn add webpack@3.6
yarn add install webpack-dev-server@2.9.7
9.安装 element-ui
yarn add element-ui -S
10.安装 less
yarn add less less-loader -D
11.安装 axios
yarn add axios
12.安装 vue-cookies
yarn add install vue-cookies
笔记：
全局变量
动态路径
引用子组件
子传父
父传子 attention：props 传递过来的参数可直接 this使用，且data中不可定义同名变量
active 动态
父子组件创建挂在先后顺序
CSS
1.始终铺满全屏
html, body {margin:0;padding:0;height: 100%;
}
<-- 然后让 div 的 height 也 100% -->
2.中文自动换行，但是英文不自动换行
span{white-space: normal;word-wrap: break-word;
}
3.垂直居中
#father{position: relative;
}
#child{position: absolute;top: 50%;transform: translate(0, -50%);
}
js
1.拷贝一个对象
let data = JSON.parse(JSON.stringify(res.data))
2.$qs 的数据里存在对象传到后端为None的解决办法
let data = this.$qs.stringify({new_annotation_data:JSON.stringify(this.annotation_data)})
3.v-if 、v-show 在页面刷新时，不满足条件值的标签会闪现的解决办法
// 标签上加上 v-clock
<div v-if='false' v-clock>
</div>
// css中
[v-clock]{display:none
}
4.给网页加上快捷键
// 拦截键盘按键
document.addEventListener('keydown',this.handleEvent)// 绑定的触发方法
handleEvent(event){// 83 -> S 拦截 ctrl+Sif(event.keyCode === 83 && event.ctrlKey){this.save(); // 自定义事件event.preventDefault(); // 阻止默认事件event.returnValue = false;return false;}
},
5.监听对象内部变动
form:{handler(val, oldVal){console.log("b.c: "+val, oldVal);//但是这两个值打印出来却都是一样的},deep:true
}
6.字符串去空格并以特定字符串分割
str.replace(/\s*/g,"").split("-")
7. Vue 读入三方 JS
require('../assets/js/anno')
8.加阴影加边框
border: solid 1px #dddddd;
box-shadow: 0px 0px 6px #d8d8d8;
9. 浏览器警告(Emitted value instead of an instance of Error) <swiper-slide v-for=“img in images”>: component lists rendered with v-for should have explicit keys.
需要给:key来解决，避免重复
10.浏览器警告vue-router.esm.js?fe87:16 [vue-router] Duplicate named routes definition: { name: “Login”, path: “/login” }
将相同 name 和 component 变为重定向
路由修改前：{path: '/',name: 'Login',component: Login,},{path: '/login',name: 'Login',component: Login,}
路由修改后：{path: '/',redirect: {name: 'Login'}},{path: '/login',name: 'Login',component: Login,},
11.Bus作为组件间传值时，需在销毁时注销
// 注册
Bus.$on()
// 注销
Bus.$off()
12.实时刷新
websocket () {if ("WebSocket" in window) {this.$message.success("您的浏览器支持 上传状态实时展示!");// 打开一个 web socketlet ws = new WebSocket("ws://10.5.5.66:7777/path/");// ws.onopen = function () {// // Web Socket 已连接上，使用 send() 方法发送数据// ws.send("发送数据");// alert("数据发送中...");// };let that = thisws.onmessage = function (evt) {var received_msg = evt.data;that.tableData = JSON.parse(received_msg).data };ws.onclose = function () {// 关闭 websocketalert("连接已关闭...");};}else {// 浏览器不支持 WebSocketthis.$message.warning("您的浏览器暂不支持 上传状态实时展示! 请手动刷新!");}
},
13.IE浏览器报Promise未定义的错误, 解决办法：
1. npm install babel-polyfill --save2. 在main.js中 import "babel-polyfill"3. 如果使用了vuex，则在vuex的index.js文件中也要 import "babel-polyfill"，最好放在 import Vuex from 'vuex' 的前面
14.table + 分页
html:
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%"><el-table-column prop="business_number" align="center" label="业务编号" ></el-table-column><el-table-column prop="uploader" align="center" label="上传者" ></el-table-column><el-table-column prop="file_name" align="center" label="文件名称" ></el-table-column><el-table-column prop="upload_time" align="center" label="创建时间" ></el-table-column><el-table-column prop="zip_status" align="center" label="Zip状态" ></el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :total="total" @current-change="current_change"></el-pagination>
data:
{ tableData: [],pagesize:10,currentPage:1,total: 30
}
method:
current_change(currentPage){this.currentPage = currentPage;
},
Vue 从零开始，项目搭建以及一些使用经验相关推荐
- 快速简洁的Vue+Electron项目搭建教程
Vue+Electron项目搭建教程 最近写一个项目,需要使用Electron集成Vue,特此记录搭建过程 Vue+Electron 常用搭建方式 在之前,通常我们会使用electron-vue脚手架 ...
- vue dplayer 加载失败_最新vue脚手架项目搭建，并解决一些折腾人的问题
话不多说,跟好lz的操作!!! 2020/8/1 第一步: ~~~~质问三连: ~~~~~~~~1.node.js安装了吗?:ht tp://nodejs.cn/download/ ~~~~~~~~2 ...
- Vue + element项目搭建与使用
Vue项目搭建与使用 新建vue项目 引入 element 第一个请求(axios) vue路由 vue项目打包部署 自定义组件 vuex入门 mockjs的使用 新建vue项目 1.首先我们需要下载 ...
- Vue+element 项目搭建
文章目录 前言 环境 vue -cli 项目创建 改造一 改造二 改造三 测试 使用 elementui 安装 loader 测试 总结 前言 最近有点小动作了,有两个项目需要推进,要把前端的玩意捡起 ...
- vue的项目搭建demo
一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...
- vue脚手架项目搭建以及常见命令
1.安装vue2脚手架: (1)在cmd命令行中输入脚手架安装命令: (2)全局安装vue脚手架:npm install -g vue-cli 或者指定版本:npm i vue-cli@5.0.4 - ...
- 【Vue】Vue 项目搭建
文章目录 一.NodeJs 下载及配置 二.全局下载项目脚手架 三.创建项目 四.启动项目 一.NodeJs 下载及配置 本节内容参见本人博客:[Vue]Nodejs下载与安装 测试安装版本: 返回顶 ...
- Vue的项目搭配以及实现页面跳转【电竞杜小帅】
Vue的项目搭建 1.安装Node.js 下载Node.js,Node.js安装包及源码下载地址:https://nodejs.org/en/download,其他默认就行. 安装好了以后调出命令行输 ...
- vue创建项目卡住不动，vue create project卡住不动
第一种方法: 好久没有创建vue新项目了,今天创建了一个新项目,一运行 vue init webpack project_name 就卡住不动,换 vue create project_name 也是 ...
最新文章
- Unity提高工作效率的终极指南
- openresty 前端开发序
- ::selection 制作空心字
- PyTorch机器学习从入门到实践-CH1
- PHP下kafka的实践(已经测试)
- 2019-03-19-算法-进化（报数）
- C语言程序设计二期末考试,C语言程序设计期末考试试卷2.doc
- 机器不学习：初识迁移学习
- python如何计算超大整数_Python 实现大整数乘法算法
- java 偏向锁_Java 偏向锁
- mysql怎么在查询_Mysql查询操作
- 高级计算机图形学建模技术与方法
- Linux -- 搜狗输入法安装完成之后的设置
- Firefox火狐浏览器主页被360篡改了
- outlook2010 html签名,Outlook2010如何设置签名
- P4 Tutorial 快速上手 (1) 教程库简介
- 21年新版kali安装
- 软件产品案例分析——福州大学微信小程序
- 瑞星2008公开测试 下载试用,还有奖品!
- 计算机毕业设计之java+javaweb的仓储系统出入库模块设计系统