vue的视图化创建项目_vuecli 创建项目的方法，以及图像化操作【23】

学习要点：1.创建项目2.图形化操作

本节课我们来开始了解 Vue-cli 创建项目的方法，以及图像化操作。

一．创建项目

1. 我们在根目录创建一个名称为 cli-02 的项目，具体命令如下：

vue create cli-02

2. 当执行了创建项目的命令后，会出现两或三个选项，具体如图：

PS：default 是默认快速构建项目的选项，babel 是语法转换，eslint 是语法检查；

PS：Manually 是手动操作，让你选择所需要的项目模块或插件；

3. 这里，我们先选择手动操作，只选择 babel 即可，其它后续可以再添加；

4. 操作要小心，没有操作提示，空格是选择和取消，回车就直接安装了，切记；

5. 下面两部操作，让你选择保存配置的方式，以及是否要给保存的配置起名；

6. 当你给保存的配置起了名称，下次创建，就可以直接用这个配置了；

7. 如果你想要删除这个配置信息，可以删除配置信息文件：.vuerc；

8. Linux 下在 home/.vuerc，Win 下在 C:\Users\用户名\.vuerc；

9. 安装好后，系统提示你使用：cd cli-02 进入目录，npm run serve 运行；

10. 在项目开发中，src 目录是你开发的文件目录，默认内置 assets 和 components；

(1) .assets 目录用于存放图片、音频、视频等资源

(2) .components 目录用于存放单文件组件；

11. 和 Webpack 一样，package.json 是配置信息，可以在这里进行查看和配置；

二．图形化操作

1. 我们可以使用 vue ui 命令创建一个图形化界面(GUI)操作，引导你创建项目；

2. 如果你在 GUI 里创建项目，会自动导入项目，如果不是可以导入进入仪表盘；

3. 导入项目后，会进入到项目仪表盘进行图形化操作：插件、依赖、配置和任务；

如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术，陪有梦想的人一起成长！

vue的视图化创建项目_vuecli 创建项目的方法，以及图像化操作【23】相关推荐

vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
Vue项目环境搭建""" node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源 ...
vue.js — 安装Webpake创建一个完整的项目并上传至码云
vue.js - 安装Webpake创建一个完整的项目并上传至码云今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...
vue/cli是什么?vue/cli如何使用? 入门篇(安装创建,组件使用,定义路由,项目导出) ∠( °ω°)／前端知识
文章目录简介安装安装nodejs nvm npm换源单次换源永久换源方法一方法二 Vue/cli安装创建Vue/cli项目解决常见错误用命令行创建项目可视化界面创建项目目录简介 ...
Vue的使用（下载vue.min.js+创建测试用的项目+Vue实例创建）
官网:https://vuejs.org/ VUE文档:https://vuejs.org/v2/guide/ 简介 Vue是一个用于构建用户界面的渐进式框架,从一开始就被设计为可逐步采用.核心库只关 ...
项目5 创建与使用视图
1.简单化视图不仅可以简化用户对数据的理解,也可以简化对数据的操作.那些被经常使用的查询定义为视图,从而使用户在以后的操作中不必每次都指定全部的条件. 2.安全性通过视图用户只能查询和修改他们所能 ...
第一章：Vue3.0+Openlayers+Cesium创建二三维联动项目
Vue3.0+Openlayers+Cesium创建二三维联动项目简介 Vue项目创建安装依赖框架结构地图加载显示效果结语简介大家好!从今天开始,我将分享我在GIS开发的过程中如何利用 ...
vue使用命令行构建完项目后_vue-cli 构建项目在IE中无法运行解决方式(build之后可运行)...
IE浏览器(只考虑IE11,更低版本我没考虑)运行时报 Promise未定义的错误解决办法: 1. 安装babel-polyfill (1.) npm install babel-polyfill ...
如何创建一个数据科学项目？
摘要: 在一个新的数据科学项目,你应该如何组织你的项目流程?数据和代码要放在那里?应该使用什么工具?在对数据处理之前,需要考虑哪些方面?读完本文,会让你拥有一个更加科学的工作流程. 假如你想要开始一个 ...
python创建django项目语句_简单了解Django项目应用创建过程
创建应用前必须先进入虚拟环境 workon npy007 创建个文件夹 madir test cd test django-admin strartproject djdemo djdemo为项目名 ...
Django项目的创建Django项目的修改配置文件
目录: 创建Django项目 Django的操作 django项目和子应用各文件作用修改Django项目的配置 path() 函数创建Django项目 C:\Users\35211>d: 先 ...

vue的视图化创建项目_vuecli 创建项目的方法，以及图像化操作【23】

vue的视图化创建项目_vuecli 创建项目的方法，以及图像化操作【23】相关推荐

最新文章

热门文章