Vue脚手架，从入门到放弃

创建Vue脚手架

安装

  • 使用淘宝镜像源安装
npm install --location=global cnpm --registry=https://registry.npm.taobao.org
  • 全局安装Vue CLI（仅第一次安装需要执行）
cnpm install -g @vue/cli
  • 进入到要创建项目的文件夹
cd xxxxxx
vue create vue_demo
  • 启动项目
npm run serve

目录结构介绍

  • node_modules

    • 项目的安装依赖

  • public

    • 放置静态资源文件

  • src

    • 项目的主入口文件夹

      • 执行启动命令后的文件执行

      • main.js

        • 整个项目的入口文件
        • 当前引入的是运行版的vue，没有模板解析器，所以是用的是render函数

      • App.vue

        • 所有子组件的父组件

  • .gitignore

    • git版本管制的忽略的配置

  • babel.config.js

    • ES6语法编译成ES5语法

  • package-lock.json

    • 记录了当前项目所有模块的具体来源和版本号以及其他的信息

  • package.json

    • 记录当前项目所依赖模块的版本信息
{
  "name": "vue_demo", //项目名称
  "version": "0.1.0", //版本号
  "private": true, //是否私人项目
  "scripts": { //指定运行脚本命令的 npm 命令行缩写
    "serve": "vue-cli-service serve", // npm run serve 开发环境
    "build": "vue-cli-service build", // npm run build 生产环境，会在项目根目录下创建dist目录，存放项目压缩文件
    "lint": "vue-cli-service lint"    // npm run lint 校验 vue、js语法是否符合规范
  },
  "dependencies": { //项目相关模块依赖
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": { //这里的依赖是用户开发环境的，不发布到生产环境
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": { //eslint 配置
    "root": true,   //用来告诉eslint找当前配置文件不能往父级查找
    "env": {        //指定逆向启用的环境，下面的配置指定为node环境
      "node": true
    },
    "extends": [
      "plugin:vue/essential", // 格式化代码插件
      "eslint:recommended"    // 启用推荐规则
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser" // 用来指定eslint解析器的，解析es6
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

  • README.md

    • 项目说明文件

 

posted @ 2022-11-24 22:09  陈彦斌  阅读(84)  评论(0)  编辑  收藏  举报