Vue Express 注册登录实现--1

2018-05-04  本文已影响121人  saronic

项目使用 vue、vuetify、express、JWT、passport、mysql

建立项目

建立文件夹

前端 vue 放在 client 文件夹里,后端 express 放在 server文件夹里。新建文件夹 vue-jwt,进入 vue-jwt,新建两个文件夹 client, server

mkdir vue-jwt
cd vue-jwt
mkdir client
mkdir server

用 vue-cli 初始化 vue

lee:vue-jwt$ vue init webpack client
? Target directory exists. Continue? Yes
? Project name client
? Project description A Vue.js project
? Author lsx.office.dell <lsx@fake.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
❯ Yes, use NPM 

进入 client,npm start,浏览器打开 http://localhost:8080/#/,看到初始界面。Vue初始化完成。

初始化 Express

进入 vue-jwt, 全局安装 express application generator, $ npm install express-generator -g
express server 建立 server 初始框架。命令完成后,

$ cd server  
$ npm install 
$ DEBUG=server:* npm start

浏览器打开 http://localhost:3000/,显示 express 初始化信息,后端初始化完成。

git init

在 vue-jwt 下,git init,添加 .gitignore 文件,文件内容如下

.DS_Store
client/node_modules/
server/node_modules/
client/dist/
client/npm-debug.log*
client/yarn-debug.log*
client/yarn-error.log*
client/test/unit/coverage/

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
上一篇 下一篇

猜你喜欢

热点阅读