10. 基于Vue+Element+nodeJs+Express

一、创建vue单页面项目

我这里创建vue项目使用的是Vue-CLI脚手架，Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。

1. 安装Vue-CLI

npm install -g @vue/cli
或者
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version

2. 创建项目

vue create front-end

创建项目-1 创建项目-2 创建项目-3 创建项目-4

3. 安装依赖

接下来安装项目所需依赖，我这里需要安装的依赖有：axios、babel-polyfill、element-ui、js-md5、moment和vue-quill-editor。

4. 安装完成后package.json里的内容

{
  "name": "front-end",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "babel-polyfill": "^6.26.0",
    "core-js": "^2.6.5",
    "element-ui": "^2.4.5",
    "js-md5": "^0.7.3",
    "moment": "^2.24.0",
    "vue": "^2.6.10",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.3.0",
    "@vue/cli-plugin-eslint": "^4.3.0",
    "@vue/cli-service": "^4.3.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "lint-staged": "^9.5.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

二、接下来我们按功能分目录将文件都创建好

前端项目文件说明

至此我们前端创建项目就已经完成了。

三、项目体验链接

周报管理系统体验链接： https://www.17sucai.com/pins/35488.html