Vue初始化项目步骤

一.查看并设置镜像地址(提高下载速度)

npm config get registry #查看镜像地址

如果镜像地址不是淘宝镜像地址,为了提高下载速度,就需要输入如下命令设置为淘宝镜像地址:

npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址

二.全局安装vue/cli(必要)

npm i -g @vue/cli

三.检查是否安装成功

npm -V

四.创建项目文件(必要)

vue create 文件名

五.进入项目文件并启动项目

cd 创建的项目文件                   //进入创建的项目文件

npm run serve                          //启动项目

打开浏览器输入小黑窗弹出的local地址

六.配置vue.config.js的文件(必要)

项目根目录下新建vue.config.js（和src同级）补充devServer

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    host: 'localhost',
    open: true,
    port: 3000
  },
  lintOnSave: true
})

七.eslint全局风格校验代码片段,配置的文件在设置-右上方分页符-setting.json,把下方代码粘上去

{
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.fontSize": 16,
    "window.zoomLevel": 2,
    "git.autofetch": true,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[vue]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    }
}