使用 Vue 脚手架创建Vue项目

前言:

为什么说是说创建一个项目呢？是因为用脚手架创建出来的文件带有helloworld小demo，所以说是一个项目。

1. 初始化脚手架

1.1 说明

Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
最新的版本是 4.x。
文档: https://cli.vuejs.org/zh/

1.2 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

会出现这种界面：
在这里插入图片描述
这是选择vue版本，使用vue2和3都可以，默认选择vue2

这样就表示项目创建好了

第三步：启动项目

npm run serve

备注：

如出现下载缓慢请配置 npm 淘宝镜像：

npm config set registry https://registry.npm.taobao.org

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，
请执行：

vue inspect > output.js

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

1.3 查看项目

打开package.json文件

{
    
    
  "name": "vue_test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    
    
    "core-js": "^3.6.5",
    "less-loader": "^10.2.0",
    "nanoid": "^3.1.30",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    
    
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    
    
    "root": true,
    "env": {
    
    
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
    
    
      "parser": "babel-eslint"
    },
    "rules": {
    
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

这三行比较重要

"scripts": {
    
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

serve代表启动项目入口，开发阶段常用
build代表构建项目，常用于项目开发完毕使用
lint是语法检查

1.4 启动项目

启动项目比较简单，打开终端，使用如下命令