vue 图形化设计工具_Vue: Vue-CLI3.0 创建项目

真实的开始需要的:开发服务器: 需要http/https协议访问 BaBel: es6转es5,兼容2015年6月之前的浏览器 postcss less sass: 开发高效 esLint: 协作开发，代码规范
前端自动化构建工具:webpack: 需要配置
Gulp
脚手架:
使用命令既可一键引入,版本有
Vue CLI2Vue CLI3安装: npm install -g @vue/cli
条件:
node.js>8.9
卸载:
uninstall vue-cli -g
安装成功:vue --version: 有版本既安装成功
创建项目: 会在用vscode打开的文件夹下生成,可以修改路径 vue create vue-test 注意: 项目名字中不能包含大写

询问默认(包含babel, eslint)工具还是手动选择工具，选手动

选择所需的工具(使用空格选择/取消，上下移动，回车下一步)

代码规范: 暂时选择仅防止错误

ESLint with error prevention only(只是错误而已)

ESLint + Airbnb config(名字规范)

ESLint + Standard config(标准规范)

默认

你更喜欢把配置文件放在哪里: 生成独立的配置文件

In dedicated config files(生成独立的配置文件)

In package.json(都放在package.json文件里)

Save this as a preset for future projects?(你会将此保存为预置以供将来的项目使用吗)

选择yes会让你输入保存的名字，选择no则不保存。

正在安装工具

再其他新建项目时就有刚刚保存的工具选项，配置和刚才的一样。

安装完成。

cd vue-test 进入创建项目

npm run serve 启动项目

项目地址

项目文件夹:

package.json文件: 包含项目的说明、版本、及命令脚本配置

{"name": "vue-test","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve",// 项目启动"build": "vue-cli-service build",// 项目压缩"lint": "vue-cli-service lint"// 代码规范},"dependencies": {// 运行依赖"core-js": "^2.6.5","vue": "^2.6.10"},"devDependencies": {// 开发依赖"@vue/cli-plugin-babel": "^3.11.0","@vue/cli-plugin-eslint": "^3.11.0","@vue/cli-service": "^3.11.0","babel-eslint": "^10.0.1","eslint": "^5.16.0","eslint-plugin-vue": "^5.0.0","vue-template-compiler": "^2.6.10"}
}

mode_modules文件夹: 存放下载的包及依赖包的地方

public文件夹: 放html的地方

src文件夹: 正式写代码的地方，入口文件是main.js

.browserslistrc文件: 浏览器的配置文件。通知需要对哪些进行兼容处理

.eslintrc.js文件: 代码规范配置

.gitignore文件: 上传到git服务器的时候忽略的文件夹，比如node_modules等

postcss.config.js文件: css后处理器的配置

babel.config.js文件: babel的配置

以上是工具的配置，需要修改的话直接修改即可。

如果要修改webpack配置，要手动在根目录下创建vue.config.js文件

module.exports = {// 在这里修改
}

如果这样修改觉得麻烦，可以使用Vue提供的命令。vue ui启动图形化界面，会在本地8000端口生成一个页面。

在这里就可以修改需要修改的webpack配置内容。

vue 图形化设计工具_Vue: Vue-CLI3.0 创建项目相关推荐

scratch（图形化编程工具）3.28.0版本更新了！
点击上方蓝字关注我们开工大吉,2022年目标是永久会员在服务200人,达到300永久会员规模. 我的永久会员购买链接: 永久会员包含很多资料,电子资料我都放在QQ群的群资料中,放百度网盘容易丢失和被 ...
scratch（图形化编程工具）做3.0版本的猫咪积木模拟器。
视频效果如下: 代码部分如下: 猫咪积木素材如下,有N个造型动作: 好了,今天的内容就分享到这里了. 好了,今天的教程就分享到这里吧. 本篇文章完整代码和素材我已经放到VIP的QQ群文件中,大家自行下 ...
Git图形化管理工具
Git图形化管理工具注意:必须在创建的仓库中进行右键打开复制这段内容后打开百度网盘App,操作更方便哦. 链接:https://pan.baidu.com/s/1eXIk01LXSmzmXvYfw ...
scratch（图形化编程工具）做一个贪吃蛇的游戏（包含视频讲解+源码）！
用scratch做一个贪吃蛇游戏! 下边上视频讲解: 代码部分,开始按钮: 开始界面文字动画: 结束页面文字动画: 蛇头代码: 蛇身代码: 食物代码: 好了,今天的教程就分享到这里吧. 本篇文章完整代 ...
scratch（图形化编程工具）使用画笔绘制雪绒花！真的太美了！
2022年目标是永久会员在服务200人,达到300永久会员规模. 我的永久会员购买链接: 永久会员包含很多资料,电子资料我都放在QQ群的群资料中,放百度网盘容易丢失和被和谐. 除了群文件的资料,我还会 ...
不跳舞的人羡慕吧？scratch（图形化编程工具）使用点阵绘制跳舞的人！
2022年目标是永久会员在服务200人,达到300永久会员规模. 我的永久会员购买链接: 永久会员包含很多资料,电子资料我都放在QQ群的群资料中,放百度网盘容易丢失和被和谐. 除了群文件的资料,我还会 ...
scratch（图形化编程工具）制作透视效果！
开工大吉,2022年目标是永久会员在服务200人,达到300永久会员规模. 我的永久会员购买链接: 永久会员包含很多资料,电子资料我都放在QQ群的群资料中,放百度网盘容易丢失和被和谐. 除了群文件的资 ...
Docker图形化界面工具Portainer最佳实践
前言在之前的文章RocketMQ容器化最佳实践我们完成的RocketMQ的容器化部署,为了方便管理docker容器,本片文章笔者就来推荐一个笔者最常用的docker图形化管理工具--Portaine ...
MySQL学习笔记03【数据库表的CRUD操作、数据库表中记录的基本操作、客户端图形化界面工具SQLyog】
MySQL 文档-黑马程序员(腾讯微云):https://share.weiyun.com/RaCdIwas 1-MySQL基础.pdf.2-MySQL约束与设计.pdf.3-MySQL多表查询与事务 ...

vue 图形化设计工具_Vue: Vue-CLI3.0 创建项目

vue 图形化设计工具_Vue: Vue-CLI3.0 创建项目相关推荐

最新文章

热门文章