Vue CLI

最近我们公司用vue搞事情，我们就用了Node和Vue写了个博客园的移动端WebApp，想拿出来与大家分享下，也谈谈我遇到的坑。由于时间问题，目前还剩“闪存”，“博问”这两块还没做完。先分享下截图吧。 我呢，就从技术，部署，以及遇到的坑来讲吧，当然啦,首先要感谢博客园官方提供接口，以及客服人员对于我的“邮箱轰炸”，还回复我的问题。致以大大的感谢。 说说我使用的技术吧 开发工具：vs code 前端：vue，vue-cli3.0 vant(ui框架)，webpack，less 后端：博客园官方api 部署：nginx，云服务器 技术就是这么简单，开发工具就不讲了，前端采用脚手架构建而成，就不用自己累死累活去配置，这个时代真好。然后再使用vant的UI框架构建样式界面，webpack打包嘛，less专注样式咯，后端就完全是博客园的api了，拿来即用，不过接口要申请下权限。前后端的请求，我采用的是“axios”,使用它的拦截器做了不少事。然后部署的话，我呢，就生成静态了，然后用nginx部署在阿里云服务器上了。 技术想讲的就这些，vue是基础，若是vue不懂，可以去我之前的文章看看，不过呢，我更建议去官方文档上去学习，其他的也是，我只是比较喜欢写写文章。由这些技术，我就构建了一个webapp。 我遇到的大坑 token问题 博客园的接口采用的是OAuth2的形式

二、vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui，首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置选项，此时一直回车就好： 然后进入项目文件夹，输入: npm run serve 出现以上情况，则说明运行成功，此时，在浏览器打开链接 http://localhost:8080/，会看到如下界面： 然后安装element-ui**（一定要在该项目根目录下安装）**： npm i element-ui -s 将element-ui引入自己的项目： #main.js import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') 三、vue-router的安装和基本配置 用以下命令安装： npm install vue-router 出现了warning，不用理会 然后将其引入项目中：

在我们平常写房地产相关项目的时候经常会用到百度地图，因为这一块客户会考虑到房源周围的配套或者地铁线路所以在这类项目中就不可以避免的会用到百度地图，当然这只是其中一种,其他地图工具也可以，因为我这个项目恰好要求用百度地图，所以就好好学习了一波百度地图，大概看了 官方文档 ，发现没有想象中那么难,要相信自己可以做出来! 先上效果图: 如图:首先在地图上方有一个筛选条件，总体难度还好吧，虽然有点bug(哈哈)，还是能用的！这个地方略过，主要看地图,首先我们需要先申请一个 百度地图ak ， 这个相当于我们的开发凭证 : 申请完了之后我们需要引导到我们项目(vue-cli脚手架搭建项目)中的index.html中,如图: 然后我们需要定义初始化地图的方法，相关参数配置如下: 接着是周边配置的部分,具体样式还请自行编写,先看效果吧: 我们现在return里面定义一个数组指明我们需要查询哪些东西: 然后是查询周边的相关配置,如下: 注意：如果数据是通过调后台接口得到，假如没有数据的话控制台会报百度地图初始化失败(xxx.gc)，这个是正常情况. 然后放下代码： 1.只需要marker的地图（请求的数据还请自行修改） // 地图 initBMap(){ // 百度API功能调用 var map = new BMap.Map("allmap"); var point = new BMap.Point

github 地址： https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目，统一管理后端接口 | 获取数据 | 请求数据，已包含vue-router，vuex，api，axios. webpack, 储存用vue-ls, 异步async/await, css less. 下载即使用项目开发。 喜欢或对你有帮助的话请点star✨✨，Thanks. A Vue.js project 使用 # 安装服务 npm install # 启动服务 npm run dev 说明 src架构 ├── App.vue ├── api │ ├── doctor.js │ └── fetch.js ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── libs │ └── util.js ├── main.js ├── router │ └── index.js ├── store │ ├── index.js │ ├── modules │ └── mutation-types.js └── views └── doctor 处理数据页面这2大块，把数据和页面分离，在vuex里面做请求数据

序 就在今天凌晨 4 点左右，vue-next v3.0.0-beta.1 版本发布，这意味着 Vue 3.0 全家桶正式登场，发布内容包括： vue: Beta vue-router: Alpha vuex: Alpha vue-class-component: Alpha vue-cli: Experimental support via vue-cli-plugin-vue-next eslint-plugin-vue: Alpha vue-test-utils: Alpha vue-devtools: WIP jsx: WIP 可以看到 Vue 3.0 beta 版本是一个项目系列，包含了我们在开发过程中需要的套件、webpack 插件等等，本文将带大家快速搭建基于 Vue 3.0 的项目框架，这和之前很多 Vue 3.0 的 Demo 不同，是具备商业化项目能力的框架，本文将包括以下内容： 基于 vue-cli 快速搭建 Vue 3.0 项目 Vue 3.0 基本特性体验 集成 vue-router 和 vuex 4.0 说个题外话，今天中午我搭建 Vue 3.0 项目时，发现了 vue-router-next 一个 block 级别的 BUG，想在 vue-router-next 项目 issue 中反馈时，发现已经有人提交了相似问题，随后晚上测试时，bug 已经被

技术编辑：徐九丨发自 北京 SegmentFault 思否报道丨公众号：SegmentFault 不知道是不是巧合，尤大又在凌晨发布了 Vue 的最新动态。等了这么久，Vue 3.0 终于发布了 beta 版本，尤大之前曾强调过 Vue 3.0 包含了五个关键变化：1.速度 2.体积 3.可维护性 4.面向原生 5.易用性。这次看来已经优化的差不多了。 尤雨溪和 Vue 尤雨溪尤大目前是一个独立开发者，也是开源 JavaScript 框架 Vue.js 的创建者，现居美国。曾就职于 Google 和 Meteor，现在全职开发和维护 Vue.js。据说除了编程和帮助妻子照顾两个孩子外，还喜欢电子游戏、卡拉 OK、寿司和收藏手表。 前端开发目前有两个比较流行的 JavaScript 框架，一个是 Facebook 创建的 React，另一个就是尤雨溪尤大搞的 Vue.js 了。业界也经常对这两个框架进行比较。 此前，尤大曾正面回答过这一问题，他表示希望大家能停止无谓的争执，多想想使用这些技术的初衷。 他认为多年以后要论历史地位，React 肯定是高于 Vue 的。React 从一开始的定位就是提出 UI 开发的新思路。这是 React 伟大的地方，Vue 里面也有很多地方是直接受到了 React 的启发。React 敢做这样的尝试，是因为它是 Facebook，是一种大公司才有的

新版vue没有build文件夹，需要配置 vue.config.js 文件 https://www.jianshu.com/p/b358a91bdf2d https://www.cnblogs.com/lxz123/p/12541601.html 来源： oschina 链接： https://my.oschina.net/u/4297704/blog/3275142

昨天，4 月 16 日，vue 3 正式进入 beta 阶段。同日，尤大参加了 State of Vue 的线上活动，以下是他上传到 google docs 上的 slides ： State of Vue Apr 16 2020 可以 FQ 的同学可以直接看。如果不方便的话，可以继续往下看一下： vue 3 核心的进度情况 进入 Beta 阶段意味着什么？ All planned RFCs merged & implemented Focus is now on stability and library integrations 目前，所有被列入计划的 RFCs 已经实现了，接下来 Vue 团队的重点是让 Vue 3 变得更加稳定，以及让 vue 相关的第三方库支持 vue 3。 3.0 对比 2.x 有哪些重要变更？ Performance Tree-shaking support Composition API Fragment, Teleport, Suspense Better TypeScript support Custom Renderer API 主要体现在 性能 、 Tree-shaking support 、 Composition API 、 Fragment 、 TypeScript支持度 和 自定义 Render 上。 性能 Rewritten

前后端分离————VUE+node（express） vue作为前端的框架，node(express)作为后端的框架。无数据库，使用端口保存数据。 VUE: 使用vue-cli构建vue项目（vueapp）。 npm install -g vue-cli（安装，安装过的就不用了） vue init webpack vueapp axios：（与ajax相似） import axios from 'axios' var url="http://localhost:3000" //express服务器的地址 axios.get(url+'/product') //放数据的接口 .then(function (response) { //收到的数据 console.log(response); console.log(response.data); //展示数据（看看是否拿到，和数据长啥样） var nodeData=response.data; }) .catch(function (error) { console.log(error); }); axios没安装的记得装一下。（安装不细说） node（express）： 启动>>>npm start

本人主要做c# winform应用，刚接触vue，发现用vue做单页面应用的比较多，多页面的资料很少，特别是用vue3.0版本做多页面的资料，更少，所以自己整理一下，结合bootstrap和jquery，也可以给有需要的同行做个参考。 1.首先用 vue --version 命令查一下安装的vue-cli版本，要3.x版本，我原先装的是2.9.6版本的 2.卸载vue-cli,执行命令：cnpm uninstall -g vue-clinpm uninstall -g vue-cli ,执行完就好了 3.安装vue-cli3.x版本：cnpm install -g @vue/cli 4.安装完毕后，查看一下版本：默认装的最新版，3.8.2 5.切换到你的项目文件夹，准备创建项目吧，cmd命令操作就好了 6.执行 vue create <项目名称>创建项目吧，我这里直接用j做测试好了 7.新版的项目创建，会有选项可以配置，这里就不做赘述，百度有哈，一路默认回车也可以 从别人那里看到的配置图，可以参考： 8.项目安装完了会有如下提示 9.执行cd j 跳转到项目路径内 10.执行 npm run serve 命令，即可启动服务 可以看到有两个地址，第一个是用于本地测试，第二个是用于局域网测试，复制其中一个到浏览器运行即可。 先写这么多，可以关注后续的更新哈 原文出处：https:/