Vue安装脚手架及使用全过程

在学webpack之前需要先看懂webpack配置以及练习熟悉一遍 

webpack中文网：https://www.webpackjs.com

一：webpack作用

webpack是一个工具，俗称打包工具，就是把所以浏览器不能识别的东西如（less，scss）等转换为浏览器可以识别的语言如（css），因为vue中需要引入大量的各种各样的模块 所以很依赖webpack 在webpack看来 一切皆模块

cli（脚手架）他能快速生成webpack打包结构，就跟‘！’可以动态生成html框架一样。

二：脚手架搭建工程

2.1：切换淘宝镜像   “npm config set registry https://registry.npmmirror.com”

2.2：下载脚手架工具

npm install @vue/cli -g   

查看下载版本

vue --version

2.3：使用脚手架安装工程`

vue create  工程名称(自定义)

 下边是手动创建流程

 选择的时候需要用什么选什么，具体情况，具体分析，我提供的是一般刚接触webpack脚手架的需求

 

 

 最终项目结构

三：将代码自动保存成ESLint规定的代码

3.1：要安装ESLINT插件

 

3.2：要将工程的根目录放入vscode进行开发

3.3：如果VScode没有更新到最新版本，升级VScode到最新版本  

3.4：在文件->首选项-> 设置->setting.json->插入代码

"eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

 插入之后代码结果

{
    "files.autoSave": "afterDelay",
    "git.ignoreMissingGitWarning": true,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}