vue2 学习笔记
一、部署环境
1.安装nodeJS -- 地址:https://nodejs.org/zh-cn/
2.安装vue脚手架 (用于创建VUE项目的)
进入项目文件或者新建一个文件
npm install vue-cli -g
3.根据模板创建项目
vue init webpack dome(工程名称)工程名字<工程名字不能用中文>
*备注(Use Eslint to lint your code -------- n) --是是否开启严格模式
4.初始化安装项目依赖
npm install
*备注:如果报错请 重新初始化 ,(不推荐使用淘宝镜像,在博客最后面附淘宝镜像安装方法)
5.启动项目
npm run dev
二、项目编写完成--部署服务器
1.打包---npm run build 在项目中生成 dist文件--里面就是打包的 项目文件
注意:修改项目目录下的 config 文件夹里的 index.js 文件中的 build 对象,将 assetsPublicPath 中的 “/” ,改为 “./” 即可
*备注:静态文件资源是相对于当前的路径
2.打包完成,把 dist放在服务器即可
3.如何控制打包体积过大
(1).1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,
打包后文件体积可以减少百分之八十!!!!!!!
*备注:npm run analyz 查看项目中用到了那些文件
备注:淘宝镜像安装:
命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org;
注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
扩展:
临时使用: npm --registry https://registry.npm.taobao.org install express
持久使用: npm config set registry https://registry.npm.taobao.org
通过cnpm使用: npm install -g cnpm --registry=https://registry.npm.taobao.org
vue2 学习笔记的更多相关文章
- Vue2 学习笔记1
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...
- Vue2 学习笔记3
文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...
- vue2 学习笔记2
文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...
- Vue2学习笔记:键盘事件
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
- Vue2 学习笔记5
文中例子代码请参考github watch属性的使用 考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变 ...
- Vue2 学习笔记4
文中例子代码请参考github 父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewM ...
- Vue2学习笔记:计算属性(computed)
参考:https://www.cnblogs.com/zycbloger/p/6428907.html
- Vue2学习笔记:组件(Component)
组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- Vue2学习笔记:过渡效果css
过渡效果 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡 <!DOCTYPE html> <html ...
- Vue2学习笔记:实例生命周期
实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个 ...
随机推荐
- CentOS下nagios报警飞信部署四步走
CentOS下nagios报警飞信部署四步走 今天 帮群里一兄弟配了下nagios上的飞信,这个东西 我个人感觉还是很实用的,不过好久没配了,今天配置了一遍,顺便 就把过程记录下来了,供大家学习! ...
- vue前端与django后端数据交互
//把数据传到路径为/airCdt/的django后端函数进行数据处理 onSubmit(){ const dict={ 'floor': this.formLabelAlign.floor, 'ro ...
- 【shell&awk】对数据从右到左隔三位来一个.
chinaunix 上看到这么一题: echo 12345678.12|sed **** 期望达到效果: 12,345,678.12 我的解法是先把字符串反转,然后根据‘.’分割,分割完成后对$2部分 ...
- PHPmailer类的使用
实现需要下载相关文件:在项目目录中运行 composer require phpmailer/phpmailer 还需要根据PHPinfo(); 确认是否开启了socket扩展和OpenSSL扩展 在 ...
- [JZOJ6244]【NOI2019模拟2019.7.1】Trominoes 【计数】
Description n,m<=10000 Solution 考虑暴力轮廓线DP,按顺序放骨牌 显然轮廓线长度为N+M 轮廓线也是单调的 1表示向上,0表示向右 N个1,M个0 只能放四种骨牌 ...
- select和FD_SET等
转自:http://blog.csdn.net/cstarbl/article/details/7645298 select函数用于在非阻塞中,当一个套接字或一组套接字有信号时通知你,系统提供sele ...
- HDU2082 找单词
问题分析 不难想到用母函数做. 令自变量\(x\)的次数就是单词价值,那么答案就是\(x\)的\(1\)次到\(50\)次的系数之和.由于我们只需要处理前\(51\)项,所以暴力多项式相乘即可. 举个 ...
- 解决eclipse无法部署工程到tomcat运行的问题
当在tomcat想加入工程时在列表没发现要的项目时, 引起这个错误提示的原因是:项目里的.project文件和.settings文件的缺失或者错误.而不能适用于现在的tomcat. 解决办法如下: 右 ...
- shell脚本之awk、sed、grep案例
1.BEGIN END用法user DIR,内容显示用户名称.用户家目录 $NF为awk的内置变量,表示最后一行,$(NF-1)就表示倒数第二行,最后打印页脚 页眉显示 cat /e ...
- 怎样用 Bash 编程:逻辑操作符和 shell 扩展
学习逻辑操作符和 shell 扩展,本文是三篇 Bash 编程系列的第二篇. Bash 是一种强大的编程语言,完美契合命令行和 shell 脚本.本系列(三篇文章,基于我的 三集 Linux 自学课程 ...