一、部署环境
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 学习笔记的更多相关文章

  1. Vue2 学习笔记1

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  2. Vue2 学习笔记3

    文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...

  3. vue2 学习笔记2

    文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...

  4. Vue2学习笔记:键盘事件

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  5. Vue2 学习笔记5

    文中例子代码请参考github watch属性的使用 考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变 ...

  6. Vue2 学习笔记4

    文中例子代码请参考github 父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewM ...

  7. Vue2学习笔记:计算属性(computed)

    参考:https://www.cnblogs.com/zycbloger/p/6428907.html

  8. Vue2学习笔记:组件(Component)

    组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  9. Vue2学习笔记:过渡效果css

    过渡效果 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡 <!DOCTYPE html> <html ...

  10. Vue2学习笔记:实例生命周期

    实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个 ...

随机推荐

  1. Spring使用@AspectJ开发AOP(零配置文件)

    前言: AOP并不是Spring框架特有的.Spring只是支持AOP编程 (面向切面编程) 的框架之一. 概念: 1.切面(Aspect) 一系列Advice + Pointcut 的集合. 2.通 ...

  2. linux的逻辑运算符

    1:expression :用于计算括号中的组合表达式,如果整个表达式的计算按结果为真,则测试结果也为真. 2:!exp:客队表达式进行逻辑非运算,即对测试结果求反 3:符合 -a 或者 && ...

  3. border-box与content-box的区别

    ㈠box-sizing 属性 ⑴box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素. ⑵语法:box-sizing: content-box|border-box|inherit; ...

  4. head first 设计模式笔记8-模板方法模式

    模板设计模式:就是定义一个算法的骨架,而将具体的算法延迟到子类中来实现. 优点:使用模板方法模式,在定义算法骨架的同时,可以很灵活的实现具体的算法,满足用户灵活多变的需求. 缺点:如果算法骨架有修改的 ...

  5. java8中规范的四大函数式接口

    java8中规范的四大函数式接口: 1.Consumer<T>   :消费型接口    void accept(T t); 2.Supplier<T>      :供给型接口  ...

  6. 彩色图像--色彩空间 CIELAB、CIELUV

    学习DIP第65天 转载请标明本文出处:http://blog.csdn.net/tonyshengtan ,出于尊重文章作者的劳动,转载请标明出处!文章代码已托管,欢迎共同开发:https://gi ...

  7. sklearn pca降维

    PCA降维 一.原理 这篇文章总结的不错PCA的数学原理. PCA主成分分析是将原始数据以线性形式映射到维度互不相关的子空间.主要就是寻找方差最大的不相关维度.数据的最大方差给出了数据的最重要信息. ...

  8. mybatis invalid bound statement (not found)

    Spring boot + Mybatis : Invalid bound statement (not found) 如果只在启动类上配置@MapperScan注解,默认只扫描和mapper接口同名 ...

  9. Linux安装并使用Ludwig训练模型

    一.在Python3环境安装Ludwig: 1.使用pip安装:pip install ludwig 2.源码编译安装: git clone git@github.com:uber/ludwig.gi ...

  10. Unity3D_(数据)LitJson创建和解析Json

    LitJson github: 传送门 JsonUtility创建和解析Json 传送门 LitJson.dll百度云盘 传送门 密码:p1py 加载LitJson.dll到Unity中 在Asset ...