美文网首页工作生活
vue如何通过vue ui创建和管理项目

vue如何通过vue ui创建和管理项目

作者: Joel_zh | 来源:发表于2019-07-03 20:09 被阅读0次

    1.安装

    可以使用下列任一命令安装Vue CLI

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

    检查安装是否成功

    vue --version
    

    2.初始化 vue ui

    打开Vue 项目管理器

    vue ui
    

    效果如下:

    Vue项目管理器

    如果vue ui已经创建或者导入过项目,默认进入的是上一次打开项目的仪表盘,需要点击右上角的项目名称,点击“Vue项目管理器”,进入项目管理器。

    Vue项目管理器

    3.创建项目

    点击创建

    Vue项目管理器

    点击在此创建新项目

    Vue项目管理器

    输入项目名称,该名称会在当前路径建立文件夹,可以修改当前的路径。选择包管理器,填写初始化git仓库,可以不填。

    Vue项目管理器

    点击下一步

    Vue项目管理器

    选择预设,这个怎么选择都可以,在项目创建之后,你仍然可以通过安装插件来增加功能,在此我们选择手动配置项目,进入功能选择。

    Vue项目管理器

    我们选择了Router和Vuex这两个一般项目基本上都会用到,选择了CSS Pre-processors使用CSS预处理器,至于是Sass、Less还是Stylus后边会选择,点击下一步

    Vue项目管理器

    配置的内容会根据上一步功能的选择来决定,当功能选择了Router所以这一步就会有是否使用History模式,功能项选择了CSS预处理器,配置项就要求选择对应的CSS预处理器是哪个。

    Vue项目管理器

    点击创建项目

    Vue项目管理器

    如果需要将刚才的预设保存,填写预设名,点击“保存预设并创建项目”,这样在此创建项目可以快速使用该预设,如果不需要,则直接点击“创建项目,不保存预设”

    Vue项目管理器

    等待一段时间,等待的时间跟选择的功能项多少和网络速度有关,下载完成后,会自动进入项目仪表盘,如下图。

    Vue项目管理器

    点击左侧导航“任务”——“serve”——“运行”

    Vue项目管理器

    运行编译成功后变成如下页面。

    Vue项目管理器

    点击右上角启动app

    Vue项目管理器

    进入默认启动页面,项目创建完成。

    Vue.js App

    4.项目管理

    点击左侧导航栏“插件”可以查看已安装的插件,再点击右上角“添加插件”

    Vue项目管理器

    搜索安装你需要的插件。

    Vue项目管理器

    依赖跟插件操作一致。

    Vue项目管理器

    可以在此直接安装我们的依赖项,比如,我们安装一个ant-design-vue,在搜索框输入“ant-design-vue”,选择结果,然后点击“安装ant-design-vue”

    Vue项目管理器

    安装时页面会卡住,等待下载安装完成后,自动恢复。这个时候你的运行依赖就会多了一个ant-design-vue。

    Vue项目管理器

    可以再项目文件的node_modules查看

    依赖项文件夹

    等同于

    $ npm install ant-design-vue --save
    

    点击左侧导航“配置”,可对现有插件进行配置,可以不用一个个修改配置文件,直接通过界面可视化进行项目配置,如公共路径、输出目录、资源目录等

    Vue项目管理器

    项目任务可进行项目开发环境的编译、生产环境编译压缩、lint检查、webpack检查、单元测试等

    查看输出日志

    Vue项目管理器

    内存分析

    Vue项目管理器

    在build编译发布版本

    Vue项目管理器

    编译至我们配置的dist文件夹,进行发布。

    编译压缩文件夹

    相关文章

      网友评论

        本文标题:vue如何通过vue ui创建和管理项目

        本文链接:https://www.haomeiwen.com/subject/tlvchctx.html