Vue CLI

vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具，对于创建项目，安装各种组件，运行项目都极为方便，是在开发vue中的必备工具 vue-cli基于nodejs，所以要先安装nodejs。从nodejs官网下载二进制包，然后把nodejs的bin目录加到系统PATH，这样就由全局的npm命令可以调用了。 npm install -g @vue/cli #安装vue-cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install @vue/cli -g #或者用淘宝源 　　 # vue --version 3.6.2 #安装完后，出现vue命令 　　 vue init 搭建项目的第一步就是初始化目录，需要使用init，先安装 cnpm install -g @vue/cli-init 　　 webpack webpack是一个模块加载和打包工具，通过使用CommonJS语法把所有浏览器需要的静态资源做相应的准备，比如合并、打包。 它有loader和plugin机制。 loader用于载入各样静态资源，不只是js脚本，还有css-loader，style-loader plugin对整个流程进行控制。 vue中也有vue-loader，用于把

移动端自适应之flexible 作用： flexible的作用是使页面可以适配不同移动终端 原理： 在页面html标签上添加style = "font-size: 36px;"样式，设置字体大小是屏幕宽度的十分之一。然后页面布局使用rem单位。 VUE: 在vue-cli中需要使用lib-flexible 在组建中引入即可 npm i lib-flexible --save import 'lib-flexible' 注意： 需要在html页面中添加移动端兼容代码： < meta name ="viewport" content ="width=device-width, initial-scale=1.0" > 当然，rem的计算是十分麻烦的，在vue中可使用 px 转 rem 工具： px2rem-loader 工具教程详见：http://hjingren.cn/2017/06/16/基于vue-cli配置移动端自适应/ 钻研不易，转载请注明出处。。。。。。 来源： oschina 链接： https://my.oschina.net/u/4385749/blog/3487360

前言 vue作为前端主流的3大框架之一，目前在国内有着非常广泛的应用，由于其轻量和自底向上的渐进式设计思想，使其不仅仅被应用于PC系统，对于移动端，桌面软件（electronjs）等也有广泛的应用，与此诞生的优秀的开源框架比如elementUI，iView， ant-design-vue等也极大的降低了开发者的开发成本，并极大的提高了开发效率。 笔者最初接触vue时也是使用的iview框架，亲自体会之后确实非常易用且强大。 笔者曾经有两年的vue项目经验，基于vue做过移动端项目和PC端的ERP系统，虽然平时工作中采用的是react技术栈，但平时还是会积累很多vue相关的最佳实践和做一些基于vue的开源项目，所以说总结vue的项目经验我觉得是最好的成长，也希望给今年想接触vue框架或者想从事vue工作的朋友带来一些经验和思考。 你将收获 vue框架使用注意事项和最佳经验 vue项目配置经验总结 vue组件设计经验总结 vue项目架构与服务化探索 正文 本文不仅仅是总结一些vue使用踩过的一些坑和项目经验，更多的是使用框架（vue/react）过程中的方法论和组件的设计思路，最后还会有一些个人对工程化的一些总结，希望有更多经验的朋友们可以一起交流，探索vue的奥妙。 在开始文章之前，笔者建议大家对javascript, css, html基础有一定的了解

学习vue正确思路,是先学vue-cli,再学vue.js单文件引用的用法,这样会在极短时间内撤底撑握vue, 如果先学vue.js单文件用法,再去学vue-cli4,可以说是重新学vue,,,,难处大大增加,而且花费的时间是双倍(最少), 带手机验证码登陆, 带全套购物车系统 带数据库 前后端分离开发 带定位用户功能 数据库代码为本地制作好了 带支付宝支付系统 带django开发服务器接口教程 地址: https://www.duanshuilu.com/ 来源： oschina 链接： https://my.oschina.net/u/4339481/blog/4263316

Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频，我自己用vue2.0重写了该项目，喜欢的同学可以去支持老师的课程： http://coding.imooc.com/class/74.html 源代码地址： https://github.com/ColinScales/shell 演示地址： https://colinscales.github.io/scale 手机扫码查看效果： ## 技术栈：vue-cli webpack axios vue-router stylus express better-scroll 部分截图 安装&&运行： 1、安装 node： http://nodejs.cn/download/ 安装 git： https://git-scm.com/downloads 2、从我的仓库克隆代码： git clone https://github.com/ColinScales/shell 3、安装vue脚手架工具vue-cli: npm install vue-cli -g 4、进入代码根目录安装依赖： npm install --save-dev 5、运行命令： npm run dev 打开浏览器查看运行效果 6、发布代码： npm run build 发布完代码后会生成dist目录，保存着项目的所有可运行的代码。

原文配套视频资源获取链接： 点击获取 原文配套源码资源获取链接： 点击获取 课程大纲 : 1.搭建开发环境 (1) 前端开发环境 (2) Node服务端开发环境 2.基础类型 (1)布尔值 (2)数值 (3)字符串 (4)数组 (5)元组 (6)枚举 (7)any (8)void (9)null和undefined (10)never (11)object (12)类型断言 3.【赠课】ES6精讲 - Symbol (1)基础 (2)作为属性名 (3)属性名的遍历 (4)Symbol.for和Symbol.keyFor 4.接口 (1)基本用法 (2)可选属性 (3)多余属性检查 (4)绕开多余属性检查 (5)只读属性 (6)函数类型 (7)索引类型 (8)继承接口 (9)混合类型接口 5.函数 (1)函数类型 i.为函数定义类型 ii.完整的函数类型 iii.使用接口定义函数类型 iv.使用类型别名 (2)参数 i.可选参数 ii.默认参数 iii.剩余参数 (3)重载 6.泛型 (1)基本用法 (2)泛型变量 (3)泛型类型 (4)泛型约束 (5)在泛型约束中使用类型参数 7.【赠课】ES6精讲 - 类Class基础 (1)实现创建实例 (2)constructor方法 (3)类的实例 (4)取值函数和存值函数 (5)class表达式 (6)静态方法 (7)实例属性其他写法

vue-cli3推崇零配置，其图形化项目管理也很高大上。 但是vue-cli3推崇零配置的话，导致了跟之前vue-cli2的配置方式都不一样了。 别名设置，sourcemap控制，输入文件位置和输出文件位置和输出的方式，压缩js控制，打包webapck日志分析，externals忽略配置（外部引入），调试的端口配置，proxy接口配置等等的。 有时候还需要我们配置的，因为官方推荐的，并不适用于我们平时的开发所用的。 所以，我的vue.config.js配置是下面这样的。还有一个改hash的配置，暂时还不知道如何配置，以后会解决的，解决的时候顺便更新这里。 资料查询借鉴地址： https://github.com/staven630/vue-cli3-config （介绍vue.config.js配置方法） https://github.com/loveRandy/vue-cli3.0-vueadmin （借鉴前辈vue-cli3项目里的vue.config.js配置）也查询了不少github上的相关项目。 下面这个vue.config.js需要先安装依赖 yarn add compression-webpack-plugin yarn add uglifyjs-webpack-plugin const IS_PROD = ['production', 'prod' ]

1.什么是路由? 在Web开发过程中，经常会遇到『路由』的概念。那么，到底什么是路由？简单来说， 路由就是URL到函数的映射。 路由的概念最开始是由后端提出来的，在以前用模板引擎开发页面的时候，是使用路由返回不同的页面， 大致流程可以看成这样： （1）浏览器发出请求 （2）服务器端监听到80端口或者443有请求过来，并解析url路径 （3）根据服务器的路由配置，返回相应信息（可以是html文件，json数据，也可以是图片） （4）浏览器根据数据包的content-type来决定如何解析数据 简单来说 路由就是用来跟后端服务器进行交互的一种方式 ，通过不同的路径来请求不同的资源，请求不同的页面是路由的其中一项功能。 2.router 和 route 的区别 route就是一条路由，它将一个URL路径和一个函数进行映射 ，例如： /users -> getAllUsers() /users/count -> getUsersCount() 这就是两条路由，当访问 /users 的时候，会执行 getAllUsers() 函数；当访问 /users/count 的时候，会执行 getUsersCount() 函数。 而 router 可以理解为一个容器，或者说一种机制，它管理了一组 route 。简单来说，route 只是进行了URL和函数的映射，而在当接收到一个URL之后，

当谈到前端构建工具，就不得不提的功能强大的 Webpack , 尤其是在最新版本中提出了 Module Federation 功能，该功能进一步增强了 Webpack 的实际作用。我相信凭借 Webpack 这几年的积累，恐怕未来几年内没有哪一个打包工具能够与之媲美，但是这并不妨碍我们探讨一下新的工具 Snowpack 。 现代打包工具的问题 使用 Snowpack，当您构建现代的 Web 应用程序（使用React，Vue等），无需使用类似于 Webpack，Parcel 和 Rollup 等打包工具。每次您点击保存时，都无需等待打包程序重新构建。相反，所有的文件更改都会立即反映在浏览器中。 请关注立即这个词语, bundleless ? 这个究竟有什么意义？为什么我会这么重点关注这一个工具。 对于一些项目与开发者而言，可能对此没有太大的感触，但是对于我来说，开发中打包曾经是一个噩梦。几年前，我从头开发一个前端 Sass 项目，该项目开始时候就使用 Vue 以 Webpack 根据业务线构建多页面。几个月的时间过去，模块有了十几个。当我修改一个很小的地方时候，需要近一分钟的时候才能热更新完成。当时，我们只能在项目开启的时候设置那些页面需要编译。在忍受了一周后，我们不得不开始拆分项目，因为开发人员和项目开发效率的原因，我们不可能根据业务拆分项目

记录 vue 项目打包的一些事情 首先声明项目都是由 vue-cli 生成; vue 项目从 dev 切换到 prod 时有很多地方需要注意; 首先是大家最需要注意的 ajax 切换环节 以前一开始用 Vue 的时候我是在 build 之后,手动修改 ajax 的请求前缀 比如现在我使用的 axios, axios.defaults.baseURL = 'api' 但是打包的时候一般都要改动 url,直到我后来知道了 process.env 这个对象, 使用他可以获取当前的环境(后续还会提到,如何修改这个对象) 之后就可以轻松的修改 ajax 的基础路径了: axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'api' : '' 使用该方法能够无需在打包时修改路径,更好地配合 webpack 的 proxyTable; 与 1 类似的 Vue.config.devtools 同样地使用 process 来解决这个问题, Vue.config.devtools = process.env.NODE_ENV === 'development' 该属性是是否能够打开 vue 的 devTools; 某个小有名气的网站,vue 上线的时候,还是 dev 环境,大家引以为戒吧 sources里的 webpack