通过npm安装vue脚手架

准备工作

  1. 安装node.js node.js中集成npm 下载地址：node下载连接
  3. 下载好后可以通过cmd命令查看是否安装成功

    4. npm 下载指定版本puppeteer npm安装指定版本vue_npm 下载指定版本puppeteer

  5. 安装cnpm（可选）
    由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们也可以使用npm的国内镜像——cnpm（淘宝npm）
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    6. npm 下载指定版本puppeteer npm安装指定版本vue_npm 下载指定版本puppeteer_02

安装脚手架

  1. Vue-cli 2.0和之后版本命令不同，若之前安装过2.0可以先卸载
    npm uninstall -g vue-cli
  3. 安装vue-cli
    npm install –g @vue/cli

    4. npm 下载指定版本puppeteer npm安装指定版本vue_npm_03

  5. 查看版本
    安装成功之后可以通过cmd命令查看安装的vue脚手架的版本号

    6. npm 下载指定版本puppeteer npm安装指定版本vue_npm 下载指定版本puppeteer_04

创建项目

  1. 切换到指定目录
  3. 创建项目

    4. npm 下载指定版本puppeteer npm安装指定版本vue_npm_05

  5. 配置项目
    是上下进项选择，回车进行确认

    6. npm 下载指定版本puppeteer npm安装指定版本vue_javascript_06

  7. 选择需要配置项目

    8. npm 下载指定版本puppeteer npm安装指定版本vue_json_07

  8. 配置项说明：
    ( ) Babel//转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
    ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
    ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
    ( ) Router // vue-router（vue路由）
    ( ) Vuex // vuex（vue的状态管理模式）
    ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
    ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
    ( ) Unit Testing // 单元测试（unit tests）
    ( ) E2E Testing // e2e（end to end) 测试
  10. 选择Vue版本

    11. npm 下载指定版本puppeteer npm安装指定版本vue_javascript_08

  12. 选择ESLint代码校验规则

    13. npm 下载指定版本puppeteer npm安装指定版本vue_javascript_09

  14. 选择如何存放位置

    15. npm 下载指定版本puppeteer npm安装指定版本vue_json_10

  15. In dedicated config files // 独立文件放置
    In package.json // 放package.json里
  16. 是否存储当前配置
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HQJrclvv-1658815734006)(https://s2.loli.net/2022/07/26/9fiNS28MJWRHyOK.png)]
  18. 创建项目

    19. npm 下载指定版本puppeteer npm安装指定版本vue_npm_11

  20. 启动项目
    切换目录——运行服务

    21. npm 下载指定版本puppeteer npm安装指定版本vue_json_12

  22. 终止Vue项目
    连续按两次ctrl+c 或者 将命令行窗口关闭

    23. npm 下载指定版本puppeteer npm安装指定版本vue_vue.js_13

打开项目后项目的结构

npm 下载指定版本puppeteer npm安装指定版本vue_json_14

项目结构说明：

  1. 1node_modules：用于存放项目中各种依赖包
  2. public：用于存放静态资源
  • index.html：生成项目的入口文件
  1. src：Vue的源代码文件
  • assets：用于存放着各种静态文件，比如图片
  • components：应用程序的组件
  • App.vue：应用程序根组件
  • main.js：入口文件，主要作用是初始化 vue 实例
  1. 其他：配置文件
  • eslintrc.js: eslint代码检查的相关配置放到这里。
  • .gitignore：配置git上传想要忽略的文件格式。
  • babel.config.js：是一个工具链，主要用于在当前和较旧的浏览器或环境中将ES6的代码转换向后兼容（低版本ES）。
  • package.json：模块基本信息项目开发所需要的模块，版本，项目名称
  • package-lock.json：是在npm install时候生成的一份文件，用于记录当前状态下实际安装的各个npm package的具体来源和版本号
  1. public文件目录和src/assets目录区别
  • public一般不用动，在vue-cli在进行build的时候，public下面的文件会原封不动的添加到dist中，不会被合并、压缩；不会被webpack打包工具所处理。

来源和版本号

  1. public文件目录和src/assets目录区别
  • public一般不用动，在vue-cli在进行build的时候，public下面的文件会原封不动的添加到dist中，不会被合并、压缩；不会被webpack打包工具所处理。
  • src/assets目录，build之后，assets目录中的文件，会被合并到一个文件中，然后进行压缩。多用来存放业务级的js、css等。