• vuecli3安装过程


    作为一个本来是java开发的搬运工,在公司前端人员缺乏的时候,就直接顶上来开发前台页面了(话说我已经很久很久没写java代码了(;′⌒`))

    好吧言归正传,刚开始弄前台就是vue,vue2还没弄熟,老板说vue-cli3出来了,你要不用最新的吧,下面就是踩过的坑

    -------------------------------------------第一步-------------------------------------------

    首先vue-cli3对node版本要求比较高,需要8.9以上的(我的正好是8.9.3,所以没去弄node了省事了)

    不过你也可以用nvm去管理node这样比较方便点,随时切换版本

    关于旧版本vue-cli已经改成了@vue/cli

    如果你已经全局安装了旧版本,你需要先卸载一下

    命令是:npm uninstall vue-cli -g

    然后安装新包

    命令是:npm install @vue-cli -g

    安装后:vue -V  查看一下版本,检查一下你是否安装成功

    -------------------------------------------第二步-------------------------------------------

    就是创建项目了,vue3搞了两种方式创建项目,一种是和以前一样的命令,还有就是在浏览器里一图形化创建

    命令创建:vue create hello-word

    图像化创建:vue ui  这个时候浏览器就会打开一个窗口

    我用的命令创建

    1选: Manually select features

    2选:(空格键是选择/取消 要装的东西,上下键滑动)回车确定下一步

     

    3选:选择n

     

    4选:你也可以选择less,看个人需求吧

    5选:这里选的ESLint+Prettier

    6选:Lint on save

    7选:

    8选:是否保存这次安装记录作为下次安装

    这里之后就开始安装中了......

    ------------------------------第三步---------------------------------

    装好之后,命令切到hello-world项目目录下

    运行命令:npm run serve

    @vue/cli3搭建的新项目,没有vue-cli2 的build和config文件夹
    所以有什么配置可以在根目录新建一个vue.config.js写上配置项
    这里是修改接口和关闭eslint检查
    module.exports = {
        lintOnSave: false,
        devServer: {
             port: 8081
        }
    }

    -------------------------------------------------------------------

    可能装的过程没那么顺利,建议先以管理员身份打开命令行

    当我安装国际化i18n时报了个错

    npm install 报错sill pacote range manifest for hmac-drbg@^1.0.0 fetched
    使用 https://registry.npmjs.org/ 也报错
    使用 npm config set registry http://registry.cnpmjs.org/后就不报错了。

    npm install --registry=https://registry.npm.taobao.org

    -------------------------------------------------------

    补充-----还有vue3在创建项目里中报这个错:

     ERROR  command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --di

    我搜了很多最终用下面这个方法解决了

    打开这个文件

    这个值开始是true,改成false再重新创建项目就ok了

    亲测有效!!!!!!!!

  • 相关阅读:
    小记:xml画一个爱心。
    类似UC天气下拉和微信下拉眼睛头部弹入淡出UI交互效果(开源项目)。
    FloatingActionButton增强版,一个按钮跳出多个按钮--第三方开源--FloatingActionButton
    回调机制的实现。
    小记:使用SharedPreferences存储来设置程序第一次进入欢迎界面,以后不会再进入欢迎界面。
    小记:获取系统时间的long值,格式化成可读时间。
    写程序的欢迎界面(运用画图方法画圆球)。
    并发的HashMap为什么会引起死循环?
    zuul重试配置
    zuul超时问题
  • 原文地址:https://www.cnblogs.com/bobo1/p/10600313.html
Copyright © 2020-2023  润新知