Vue CLI

定场诗 守法朝朝忧闷，强梁夜夜欢歌， 损人利己骑马骡，正直公平挨饿。 修桥补路瞎眼，杀人放火的儿多， 我到西天问我佛，佛说：我也没辙！ 概述 Vue官方的脚手架工具Vue Cli有了一次较大的更新，相比于2.x版本，新版本3.x中对项目的搭建，相关包、插件的安装都有了新大的不同。本文即立足于此，选择 @vue/cli 3.x 版本的脚手架工具，动手实践从0到1搭建Vue项目，包含了项目的初始化，以及Vue全家桶(VueRouter/Vuex/Axios/CSS预处理器)的相关配置。 一、认识新版本 @vue/cli 3.x版本，更加注重脚手架工具本身的易用性和易扩展性，支持开箱即用，同时提供了丰富的插件系统。 优秀之处 为啥如此优秀？ 功能丰富 对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。 易于扩展 它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。 无需 Eject Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了 CLI 之上的图形化界面 通过配套的图形化界面创建、开发和管理你的项目 即刻创建原型 用单个 Vue 文件即刻实践新的灵感。 面向未来 为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web

什么是vue-cli单文件组件 vue-cli 是官方提供的一个脚手架工具，它可以快速的生成vue的项目模板。 官方网址： http://www.npmjs.com/package/ ... 主要功能 提供了一个规范的目录结构 本地调试 代码部署 热加载 单元测试 怎么建立 npm install vue-cli npm init webpack npm install npm run dev 初始目录说明： build，项目webpack相关配置文件 config，vue基本（本地与线上环境）配置文件（可以配置监听端口，打包输出等） node_modules，扩展依赖文件（依赖包） src，开发目录，项目核心文件 static，静态资源目录（一般放图片类资源 .babelrc，babel编译参数 .editorconfig，代码格式 .gitignore，git上传需要忽略的文件配置 .postcssrc.js，转换css的工具 index.html，主页 package.json，项目基本信息（在创建vue-cli项目后自动生成） README.md，项目说明 来源： https://my.oschina.net/u/4144971/blog/3110173

主要讲三个东西： Vue.js devtools开发工具的使用 使用debugger和sourcemap调试Vue组件 vscode中调试Vue组件 Vue.js devtools开发工具的使用 在Chrome或Firefox浏览器的扩展插件仓库里搜vue devtool，安装Vue.js devtools. 打开vue项目,在控制台选择vue image 可操作组件查看信息变化 image 使用debugger和sourcemap调试Vue组件 针对vue-cli webpack官方脚手架，打开build/webpack.dev.conf.js文件，找到下面这句： devtool: '#cheap-module-eval-source-map', 将其修改为： devtool: '#eval-source-map ', 要修改的地方已经都改好了，就是这么简单，惊不惊喜，意不意外。 现在是具体调试了。假设我们想调试App.vue这个组件，可以在想要调试的代码前添加debugger方法，如下图所示： image 然后运行npm run dev，启动服务后刷新页面（刷新前先把浏览器开发者工具打开），可以看到在程序进入App.vue组件mounted这个组件生命周期钩子里后，指定到debugger处时程序就被debug了。如下图所示，剩下的大家应该都很熟悉了。可以看到

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 首先vue.js的作者是中国人，所以说他是国产的，吸收了google的angular.js和facebook的react.js的特性，摒弃了jquery传统的DOM操作，采用数据绑定和指令等概念，可以说是未来WEB端开发的趋势，但是也并不代表jquey就淘汰了，存在即合理，jq应该在以后会有其他领域的价值，这里我就不多说了。 说了这么多，我们还是开始怎么搭建vue.js的环境吧。首先要搭建vue的环境需要借助node.js的npm的包管理器。这个npm我就不详细介绍了，网上自己去百度，反正后面要安装的一系列的依赖或者包都要用到这个。 一、node.js的安装 node.js近几年很火热，开始我以为是一门语言，其实只是一个平台，他封装了chorme v8的引擎，可以直接用js作为服务器端脚本语言。http://nodejs.cn/进去该网站下载最新版本的node, 注意npm版本是3.8以上的就行。后面就是下一步下一步的安装就可以了。安装完成后，wind+r 弹出cmd，输入node -v 和 npm -v

一、 Error: custom keyword definition is invalid: data.errors should be boolean 说明 ： 在现版本的VueCLI使用创建项目后 出现 异常： Error: custom keyword definition is invalid: data.errors should be boolean 二、解决方案： 按错误位置，修改对应的js配置文件，将data.errors属性设置为true就可以了。 更多： 基于Vue的手机端UI框架整理 Vue 引用全局样式 vscode 中的 vue 格式化（一） 来源： oschina 链接： https://my.oschina.net/u/2332115/blog/3008761

一、关于Element 1.Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的 桌面端 组件库，官方网址： http://element-cn.eleme.io/#/zh-CN 2.Element UI 是饿了么前端团队倾情打造 https://github.com/ElemeFE 3.相对应的移动端组件库Mint UI，官方地址： http://mint-ui.github.io/#!/zh-cn 二、操作步骤 1.安装搭建Vue开发环境，如需参考： https://my.oschina.net/tianma3798/blog/2208847 2.添加 vue 的vue-cli-plugin-element插件，既可以使用Element组件了。 在当前项目文件夹使用命令添加 vue add element 注：在安装过程中，提示是否完全加载方式 ，提示是否支持Sass，提示是否使用中文版本。 按自己的需要设置。 3.安装完成之后，使用 npm run serve 就可以运行了 更多： VSCode 搭建Vue开发环境之Vue CLI Vue相关UI框架整理 微信小程序Canvas隐藏问题处理 来源： oschina 链接： https://my.oschina.net/u/2332115/blog/2209070

解决办法： 修改package.json中的eslintConfig:{} 中的 “rules”:{}，增加一行代码: "no-console":"off" 来源： https://my.oschina.net/huibaifa/blog/3108391

一、Vue CLI编译错误 进行 publicPath 配置，npm run build报错： Invalid options in vue.config.js: "publicPath" is not allowed //码云仓库路径 https://gitee.com/codcoe/blog publicPath: process.env.NODE_ENV === 'production'?'/blog/':'/', 二、解决方案： 将vuecli3升级至3.3.0即可 处理步骤： 1.修改package.json的插件版本 2.修改生成的相对目录 3.使用 npm install 重新安装模块，即可。 更多： Vue2如何构建一个多页应用 Vue2如何配置webpack相关设置 Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap 来源： oschina 链接： https://my.oschina.net/u/2332115/blog/3013088

1、下载nodejs安装包 http://nodejs.cn/download/ 2、傻瓜式安装 3、在nodejs安装目录创建两个文件夹 D:\software\nodejs\node_cache D:\software\nodejs\node_global 4、设置缓存文件夹 npm config set cache "D:\software\nodejs\node_cache" 5、设置全局模块存放路径 npm config set prefix "D:\software\nodejs\node_global" 6、基于 Node.js 安装cnpm（淘宝镜像） npm install -g cnpm --registry=https://registry.npm.taobao.org 7、设置系统环境变量 path 属性增加 --> D:\software\nodejs\node_global 新增NODE_PATH D:\software\nodejs\node_modules 8、安装webpack #全局安装 npm install -g webpack #安装到你的项目目录 npm install --save-dev webpack #打包命令，main.js是入口文件，build.js是指定打包后生成的文件名称 webpack main.js build.js

前言 这部分非常的简单，很多人可能不屑一顾，所以写的人也比较少，写它的原因是，当初自己开始玩前端的时候一脸懵逼，浪费了一些时间在这一块，希望能对刚开始接触的人有所帮助。 渐进式JavaScript框架 以前用的多的都是jquery这些js框架，后面又有了react，Angular，到要学习的Vue，之所以选择vue是因为它入门简单，可以快速的培训人员进入岗位，也就是相对用人成本比较低，当然这是从招人和转型的角度说的。渐进式的js框架，我的理解是由简单到复杂的使用方式，它可以直接嵌入到html中使用，也可以像react这些一样适应各种复杂场景和要求，也可以很方便的和已有项目框架结合使用。官网文档是非常友好的，建议学习先看 官方文档 环境搭建 1.直接在html代码中引用，直接在html代码中使用，可以快速的看到效果初学者会有成就感一些 开发环境版本 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2.使用webpack 2.1 WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在开发的过程中，可以很好的即时的运行代码效果