首先当然是安装,安装之前也要先检查电脑中是否已经安装了vue-cli3
    通过输入 vue —version 进行检查
    如果显示2.9.6的话,就要先进行删除了
    npm uninstall -g vue-cli
    卸载后在输入 npm i @vue/cli -g(全局安装)
    注意: 只有安装结束后跳出一些蓝色字体才算安装成功,
    如果安装错误,则需要输入npm cache clean —force npm 清理npm缓存之后再进行安装
    接下来开始创建项目,首先(shift+鼠标右键)点击文件中的某处
    image.png
    点击出现这个
    image.png
    我现在的版本是4.5.12
    image.png
    如果出现的错误
    image.png
    则输入set-ExecutionPolicy RemoteSigned
    image.png
    设置成功后,输入 vue ui
    image.png
    就会自动弹出这个

    image.png
    然后开始新建项目,点击到项目 -> 在此创建新项目
    image.png
    输入项目名,其他全部默认即可
    预设选择手动
    功能按需求选择, 说几个我知道的, choose vue version ,babel, 使用配置文件必点
    router(路由),vuex(状态管理),css pre-processors(css拓展语法的选择less/sass),
    linter/formatter(这是代码编写规则, 不合规则就报错, 有强迫症的选了会发疯, 有需要的可以试一下),
    再下来就到了配置这里
    第一个是vue版本,建议默认,不然错了不一定改的回来
    第二个是router模式选择,默认hash就行,另一种是history模式
    第三个是选择哪种css拓展语言,随便吧,这里我用的是less
    image.png
    然后创建,
    image.png
    如果你觉得当前配置的这些东西,在后面可能创建项目时很多都是这种需求的,你可以给它取个名字保存,方便下次使用

    这里我就直接创建了
    image.png
    进入漫长的等待环节, 出现这个就代表创建成功了
    image.png
    然后我们到任务->serve里点击运行,再点击启动app
    image.png
    就会看到这个
    image.png
    ok,现在我们每次修改文件内容都可以在这里实时预览,
    当我们把app完善之后就是打包了,在任务中转到bulid,点击运行
    image.png
    这里会报错,因为cli4的打包环境是默认production的
    image.png
    点击参数->将环境选择为development, 保存退出,然后再运行一次
    image.png
    可以看到这次成功了,但我们打开项目下的dist的index.html试一下,就会发现一片空白
    为什么呢? 按F12检查时发现是路径导入的问题,怎么办,更改打包时的配置就ok了
    在项目根目录下新建vue.config.js文件,内容如下
    image.png
    然后,我们在打包一次
    image.png
    ok,打包成功
    现在开始,我们就可以使用cli4创建项目,等需求完成后直接打包就ok了
    脚手架用着确实方便快捷,容易上瘾, 但并不意味着webpack的知识作用少
    在我看来, webpack的学习更多的是为了我们能看懂cli里面的一些配置,cli用来完成任务, 而webapck用来读懂cli的配置
    vue-cli4安装,运行,打包教程结束