创建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

    • 项目说明文件

原文地址：http://www.cnblogs.com/chenyanbin/p/16923623.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性