• Vue-cli的安装和使用


    Vue-cli的安装和使用

    安装node环境

    nodejs是一个JavaScript的运行环境,可以使得JavaScript不依赖浏览器运行。

    由于我采用的Mac环境,所以安装方式略有不同,windows上安装node只需要在 node官网下载windows版本的msi包安装,会自动配置环境变量。

    安装成功以后可以在控制台输入以下命令测试:

        node -v #查看安装版本
        npm -v #查看npm安装版本
    

    配置淘宝镜像

    由于node要经常使用npm命令下载一些依赖,国外的镜像速度极慢,并且会导致下载失败等问题,所以建议配置国内的淘宝镜像。配置方法如下:

    #设置淘宝镜像
    npm config set registry https://registry.npm.taobao.org
    #测试是否安装成功
    npm config get registry 
    

    安装vue-cli

    Vue-cli是vue项目的脚手架,可以快速搭建一个Vue项目。全称是Vue Commond Line而不是(Vue Client),由于vue-cli2.x-已经过时,这里介绍的是vue-cli3.x、4.x的安装的方式。注意:需要node.js8.9+的版本。

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    

    安装成功后可以通过vue命令检测是否安装成功,使用vue --version命令查看vue-cli版本,注意:这个命令查看的是vue-cli的版本,而不是vue的版本!

    使用vue-cli+element创建项目

    vue create my-app
    cd my-app
    vue add element
    

    vue ui介绍

    vue ui是vue3.x版本后的新特性,意在使用图形化界面快速搭建一个脚手架项目,并且创建出的项目可以做到近乎0配置,直接使用。类似于SpringBoot约定大于配置的思想。

    使用vue ui创建项目

    在控制台中输入vue ui,尽量在要创建项目的父目录中输入

    vue ui
    #安装慢可以执行
    npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
    

    在浏览器弹出的页面中点击红色箭头指向的内容

    点击创建,指定项目的父目录,点击在此处创建项目按钮开始创建项目

    配置项目文件夹的名称、包管理器(建议选择npm),以及是否初始化本地git仓库,点击下一步。

    选择创建方式:

    • 创建方式中可以保存之前创建项目的配置模板

    • 默认(一切都使用默认的配置,但是之后还可以修改)

    • 手动 自行选择需要安装的模块

    • 从git仓库中拉取

    这里我们先选择手动,然后点击下一步:

    选择需要引入的模块,默认包含了Babel、Linter、这里我额外选择了Router。在配置完成后点击下一步

    由于上一步引入了Linter,这里需要配置错误检测机制,按照如下配置即可:

    此时点击完成创建,会提示是否要保存为新预设,如果选择保存需要指定一个预设名,下次创建的时候就会有这个“模板”,之后使用此“模板”创建的项目都会使用这样的配置。这里我们先选择不保存预设。

    等待片刻后项目就创建成功了。。。

    在项目创建成功后,还可以继续依赖其他内容以及安装新插件

    安装elementUI插件

    依赖也可以在vue ui中添加

    还可以在vue ui中启动、编译、检查项目问题等操作

    注意:使用mac创建的项目可能会有访问权限问题 可以使用chmod -R 777 fieldname命令解决

  • 相关阅读:
    定时任务
    ---Ubuntu 连接手机tethering
    ---thunar 文件浏览器的使用!
    ---recovery ui 修改
    ---wordpress 升级遇到的问题!
    ---BD PROCHOT
    ---安装/修复Ubuntu/Ach Linux efi 启动 !!!(包括双系统启动)
    ---sgdisk 分区表
    --- cache PV 丢失或损坏 怎么办
    ---lvm2分区修复问题!
  • 原文地址:https://www.cnblogs.com/zhangruifeng/p/13396777.html
Copyright © 2020-2023  润新知