vue项目开发 b3041-图书馆 开发准备

node的安装

1.下载 node 的安装包，建议下载稳定版
node.js官网
2. node 安装，一键式安装，一路 next
3. 检测 node 是否安装成功
win + R 输入 cmd

在终端输入 node -v 和 npm -v

如图所示，显示版本，即安装成功。
可选更改全局安装地址，这里并没有更改，有需要的可浏览博文
node安装

vscode安装

1.下载 vscode ，建议安装稳定版
vscode官网
2. vscode 安装，一键式安装，安装成功后桌面会出现相应图标

vue安装

1.在 vscode 的终端输入

npm install -g @vue/cli

2.使用 ui 界面创建项目

vue ui

3.选择自己想创建项目的文件夹进行项目的创建
可以选择默认配置也可以自定义
我这里是自定义，选择

babel 
router 
vuex 
Linter/Formatter 使用配置文件
2.x  
Pick a linter/formatter config:ESLint + Standard config

4.初始化成功运行，出现以下界面就算成功了

node服务器

1.下载 koa

npm i koa

2.koa 创建项目

koa2 项目名
cd 项目名
npm i

安装element-ui

1.安装 element-ui

npm i element-ui

2.在 vue 中的 main.js 中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

安装normalize.css

1.npm 安装

npm i normalize.css

2.在 mian.js 中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'normalize.css'

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

mongoDB数据库安装

1.下载 mongoDB
mongoDB官网
2.将下载好的包进行安装即可，注意在网速允许的情况下直接安装可视化工具，也可以后安装