| languages | page_type | products | description | ||||
|---|---|---|---|---|---|---|---|
|
sample
|
|
A Cosmos DB, Express.js, Vue, and Node.js app.
|
vue-cosmosdb
A Cosmos DB, Express.js, Vue, and Node.js app
Please see the
connect2017branch to see the sample use in the Connect 2017 video (link coming soon)
Features
This project framework provides the following features:
- Vue.js
- Node.js
- Express
- Mongoose API
- Connecting to MongoDB or CosmosDB
- Building, Debugging, Deploying with Docker
Getting Started
Prerequisites
Node.js with npm
Installation
git clone https://github.com/Azure-Samples/vue-cosmosdb.git
cd vue-cosmosdb
npm install
Database settings
Configure Cosmos DB server settings
Rename the
.env.example.jsfile to.envin the root folder and update it with your Cosmos DB settings. Replace the accountName, databaseName, key, and port with your specific configuration.SERVER_PORT=3001 PUBLICWEB=./server/www COSMOSDB_ACCOUNT=your_cosmos_account COSMOSDB_DB=your_cosmos_db COSMOSDB_KEY=your_cosmos_key COSMOSDB_PORT=10255
Quickstart
This will build the app and run the dev server for Vue and WebPack. The Node express server will launch and WebPack will proxy the calls from the browser to the API in express. It will also prepare it for local debugging.
# build for production with minification
npm run build
# serve on http://localhost:8080
# and run the api on http://localhost:3001
npm run debug
Local Prod Build
This will build the app and launch via the Node.js express server.
# build for production with minification
npm run build
# run the node server
npm start
Docker
Build the image and run container.
npm run docker-up
Build the image and run container for local debugging.
npm run docker-up-debug
-
构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的： var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式， Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。 在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选
-
教程简介 本教程要实现一个简单的后台管理系统，包含登陆、数据列表、数据查询、列表分页、添加数据、修改数据和删除数据等功能，教程会从 Vue 入门开始讲解，包含 es6、Sass、Webpack、Bootstrap、jQuery 等技术，再到后台管理系统的一些常规功能，用 Vue 如何去实现。 也许会有人质疑 Vue 和 jQuery 的搭配，在我本人看来，jQuery 本身已很成熟，而且包含了很多
-
FAQ 哇，非常长的一页！是否意味着 Vue 2.0 已经完全不同了呢，是否需要从头学起呢，Vue 1.0 的项目是不是没法迁移了？ 非常开心地告诉你，并不是！几乎 90% 的 API 和核心概念都没有变。因为本节包含了很多详尽的阐述以及许多迁移的例子，所以显得有点长。不用担心，你不必从头到尾把本节读一遍！ 我该从哪里开始项目迁移呢？ 首先，在当前项目下运行迁移工具。我们非常谨慎地把高级 Vue
-
Integration with Vue is easily done with the @tinymce/tinymce-vue package. To use it, install it with npm like this: npm install @tinymce/tinymce-vue For information on how to use the package, check
-
本规范提供了一种统一的编码规范来编写 Vue.js 代码。这使得代码具有如下的特性： 其它开发者或是团队成员更容易阅读和理解。 IDEs 更容易理解代码，从而提供高亮、格式化等辅助功能 更容易使用现有的工具 更容易实现缓存以及代码包的分拆 要点 尽量使用ES2015，遵循CommonJs规范 切勿直接操作DOM,所以也应该避免使用jQuery库 data属性一定要是一个函数并且返回一个json对象
-
全局配置 Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列属性： silent 类型： boolean 默认值： false 用法： Vue.config.silent = true 取消 Vue 所有的日志与警告。 optionMergeStrategies 类型： { [key: string]: Function } 默认值： {} 用法： Vue.c
-
MVVM MVVM双向数据绑定是通过数据劫持+发布订阅模式Object.defineProperty let obj={}; let theValue; Object.defineProperty(obj,'theKeyName',{ //value:'theValue', configurable:true, //可以配置对象，删除属性 //writable:true
-
Highcharts Vue 是我们基于 Vue 框架封装的 Highcharts，可以很方便的在 Vue 开发环境中使用 Highcharts 创建交互性图表。 开发环境 已经全局安装 Node.js, NPM Vue, Highcharts 库已经安装在项目中 通过 npm 安装 Highcharts 下载安装 安装 highcharts-vue npm install highcharts-