搭建 VUE + NODE.JS + ElementUI 学习过程中问题总结

1、exports 和 module.exports

require 用来加载代码,而 exports 和 module.exports 则用来导出代码。

  1. module.exports 初始值为一个空对象 {}
  2. exports 是指向的 module.exports 的引用
  3. require() 返回的是 module.exports 而不是 exports

2、vue-cli / vue-router / vue-loader

vue-cli相当于脚手架 给你自动生成模板工程
vue-router是 vue路由插件 支持你单页应用的
vue-loader是webpack下loader插件 可以把.vue文件 输出成组件

use vue-cli create a vue project

  1/npm install -g vue-cli

  2/vue init webpack xxxx

  3/cd xxx

  4/npm install

  5/npm run dev

3、node 设置页面语言.html

app.set(‘views‘, path.join(__dirname, ‘views‘));

app.engine(‘html‘, require(‘ejs‘).renderFile);    // 这句就是使用ejs模板渲染html页面

app.set(‘view engine‘, ‘html‘);

最初创建的node 是通过app --router --res.render 渲染整个html文件。

接下来实现 抽离公共部分 实现内容部分拼接(router里的res.render获取到具体内容部分,然后拼接成一整个html文件 渲染)

时间: 2024-11-02 19:16:02

搭建 VUE + NODE.JS + ElementUI 学习过程中问题总结的相关文章

搭建Windows Node.js环境

利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏览器就基于V8,同时打开20-30个网页都很流畅.Nodejs标准的web开发框架Express,可以帮助迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低.非常适合小型网站,个性化网站 这里介绍如何搭建Node.js Windows环境 第一步:下载并执行Node.js Windows Installer (.msi) (V

[Node.js] ECMAScript 6中的生成器及koa小析

原文地址:http://www.moye.me/2014/11/10/ecmascript-6-generator/ 引子 老听人说 koa大法好,这两天我也赶了把时髦:用 n 安上了node 0.11.12,下了个koa开启harmony模式试水.在一系列文档和贴子的教育下,大概认识到: koa 是TJ大神主导的新一代Web框架 koa 的中间件基于ES6的生成器函数(function *)形式 koa的核心流程库是 co,它能很好的解决Pyramid of Doom问题 在接触 Node.j

node.js获取url中的各个参数

实例代码test.js var http=require('http'); var url=require('url'); var querystring=require('querystring'); http.createServer(function(request, response) { var urlStr = request.url; var methodName = urlStr.substring(1, urlStr.indexOf('?')); console.log('me

Vue(vue+node.js+mongodb)_登录注册(密码登录)

一.前言 1.密码登录(分析) 2.验证码部分 3.提交表单 4.保存显示 5.完善功能,首页中如果登录成功之后显示的是图标,没有登录显示的是“注册登录” 6.处理bug(当我们一刷新之后当前登录的信息都没有了) 二.主要内容 1.密码登录(分析) (1)第一步用户输入先提交登录表单信息 2.验证码部分 这里显示的验证码,在通过异步调用获取到,并且在后端存进session中 (1)前端部分 <!--获取验证码:前端--> <input type="text" maxl

vue——node.js安装

1.我基本上用电脑访问  vue  node官网速度特别慢  所以一般用手机下载 下载后在  传输   下载node.js的  msi文件的安装程序 安装完成  win+r cmd 然后   node  -v 2.使用npm管理  国外的比较慢  所以我们使用国内淘宝的  工具      cnpm cnpm 代替  npm  命令   npm install -g cnpm --registry.npm.taobao.org 3.安装webpack 命令cnpm install webpack-

vue+node.js学习笔记

一.搭建vue开发环境 vue init webpack newmall cnpm install npm run dev 二.测试静态页 把静态页的css拷贝进来 src目录下建立views文件夹,专门放置页面. 首先建立一个GoodsList页面 将静态html拷贝进来 引入css 更改路由 此时 8080端口首页就可以展示商品列表 注意: 引入路径时候也可以 import GoodsList from '@/views/GoodsList.vue' @定义的位置在build/webpack

vue node.js 安装

首先express + 项目总目录名 : 生成项目 进入目录 npm install 生成依赖关系: npm install vue 生成 vue : express 默认支持jade 不支持HTML模板  须手动添加: npm install ejs 在配置文件app.js进行必要配置: var ejs = require('ejs'); app.engine('html',ejs.__express); app.set('view engine','html'); 并在路由里面添加方法: r

Vue(vue+node.js+mongodb)_退出登录

一.前言 二.主要内容 1.当用户登录之后才会出现“退出登录按钮” 2.登录之后  3.这里使用mint-ui, “退出登录”按钮的显示隐藏和是否有userInfo的值是一样的,如果存在userInfo就显示这个退出按钮,如果没有登录就不显示 <section class="profile_my_order border-1px"> <mt-button type="danger" style="width: 100%" @cl

node.js之express中app.use

express中app.use 用法: app.use([path,] function [, function…]) 一.app.use() 在express中是怎么工作的 app.use在express中被看成是消息中间件 middleware . Use the given middleware function, with optional mount path, defaulting to “/”, 如果path没有被设定,那么默认为”/”. 引入一个所谓的中间件,其实就是用来再实际请