node+vue+mongodb

node和npm的安装及环境搭建
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
node+vue+mongodb_第1张图片
image.png

#####第一个例子:



    
    Titel
    


    
{{message}}

在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

命令行工具(CLI)
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
node+vue+mongodb_第2张图片
image.png
node+vue+mongodb_第3张图片
image.png
node+vue+mongodb_第4张图片
image.png
node+vue+mongodb_第5张图片
image.png
node+vue+mongodb_第6张图片
image.png
node+vue+mongodb_第7张图片
image.png
node+vue+mongodb_第8张图片
image.png
node+vue+mongodb_第9张图片
image.png
node+vue+mongodb_第10张图片
image.png

mode:'hash','history'

node+vue+mongodb_第11张图片
image.png
node+vue+mongodb_第12张图片
image.png
node+vue+mongodb_第13张图片
image.png
node+vue+mongodb_第14张图片
image.png
node+vue+mongodb_第15张图片
image.png
node+vue+mongodb_第16张图片
image.png
node+vue+mongodb_第17张图片
image.png
node+vue+mongodb_第18张图片
image.png
node+vue+mongodb_第19张图片
image.png
node+vue+mongodb_第20张图片
image.png
node+vue+mongodb_第21张图片
image.png
node+vue+mongodb_第22张图片
image.png
node+vue+mongodb_第23张图片
image.png
node+vue+mongodb_第24张图片
image.png
node+vue+mongodb_第25张图片
image.png
node+vue+mongodb_第26张图片
image.png

图片懒加载 vue-lazyload

node+vue+mongodb_第27张图片
image.png
node+vue+mongodb_第28张图片
image.png
node+vue+mongodb_第29张图片
image.png
cnpm i -g expree-generator
express --version
node bin www.js#启动
image.png
node+vue+mongodb_第30张图片
image.png
node+vue+mongodb_第31张图片
image.png
node+vue+mongodb_第32张图片
image.png

node+vue+mongodb_第33张图片
image.png

node+vue+mongodb_第34张图片
image.png
node+vue+mongodb_第35张图片
image.png

你可能感兴趣的:(node+vue+mongodb)