使用 Vue 脚手架创建Vue项目

前言:

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

1. 初始化脚手架

1.1 说明

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

1.2 具体步骤

第一步(仅第一次执行):全局安装@vue/cli。

npm install -g @vue/cli

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

vue create xxxx

会出现这种界面:
使用 Vue 脚手架创建Vue项目
这是选择vue版本,使用vue2和3都可以,默认选择vue2
使用 Vue 脚手架创建Vue项目
这样就表示项目创建好了

第三步:启动项目

npm run serve

备注:

  1. 如出现下载缓慢请配置 npm 淘宝镜像:

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

  1. 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 启动项目

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

npm run serve

使用 Vue 脚手架创建Vue项目
如果界面是这样,恭喜你项目启动成功,可以打开网址查看啦,第一个网址是本地访问地址,第二个是局域网内其他小伙伴访问地址。
使用 Vue 脚手架创建Vue项目
看到这个界面,表示项目启动成功了!!!之后就可以构建自己的项目了!!!

上一篇:vue3前端青铜到黄金王者 #14 vue-cli-service (下)serve使用


下一篇:Object中equals方法的机制研究