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