vue-cli3的安装和项目创建

这篇具有很好参考价值的文章主要介绍了vue-cli3的安装和项目创建。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一 vue-cli3的安装
(注意:vue-cli3在安装之前,需要先删除旧版本,即vue-cli2)

vue-cli3的安装和项目创建

 文章来源地址https://www.toymoban.com/news/detail-489835.html

cnpm i -g @vue/cli
vue-cli3的卸载:cnpm uninstall -g @vue/cli 

然后用命令“vue -V”查看是否删除vue,如果没有删掉,就直接去文件夹里面删除vue文件夹即可

vue-cli3的安装和项目创建

(二)vue-cli3项目创建

vue-cli3的安装和项目创建

vue-cli3的安装和项目创建
1,用dos命令的方式
vue create 项目名
注意:项目名不要有大写字母!! 并且一定一定要选择lint!!!!!否则会遇到意想不到的错误(scss会疯狂报错)

 vue-cli3的安装和项目创建

 

 

vue-cli3的安装和项目创建

vue-cli3的安装和项目创建,回车

空格键选择,上下键移动,回车键确认vue-cli3的安装和项目创建

空格键选择,上下键移动,回车键确认

vue-cli3的安装和项目创建vue-cli3的安装和项目创建

vue-cli3的安装和项目创建

vue-cli3的安装和项目创建

然后提示是否将上面的设置设为预设,输入n表示不设预设,输入y表示设置预设,然后写个预设名

vue-cli3的安装和项目创建

 

注意:在npm run serve命令执行之前需要先执行命令安装依赖:cnpm i

在谷歌浏览器中输入以下地址

vue-cli3的安装和项目创建

 

出现以下界面表示项目创建成功了!

vue-cli3的安装和项目创建

2,图形化界面的方式

输入命令:vue ui

vue-cli3的安装和项目创建

 

 

然后会跳转到浏览器,如果浏览器没反应,就换个浏览器(如谷歌浏览器),重新输入地址:http://localhost:8000/

vue-cli3的安装和项目创建

 

等“启动app”按钮可点击时,点击即可启动

vue-cli3的安装和项目创建

出现以下界面即成功!

另外:如果想将项目部署到github上,下面这种方式不易出错

1,新建文件夹test_git作为仓库

2,在桌面版GitHub上新建名为test_git的仓库

3,在test_git文件夹中选中路径,输入cmd

4,输入命令 vue create 项目名 创建vue3项目

5,在桌面版GitHub提交项目
————————————————

 

到了这里,关于vue-cli3的安装和项目创建的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用vue-cli脚手架创建vue项目

    0.vue cli安装 vue cli2安装 vue cli2卸载 vue cli3安装 key通过命令查看当前安装的vue cli的版本 1. vue init vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目 webpack是官方推荐的标准模板名。 vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的

    2024年02月11日
    浏览(70)
  • vue-cli3.0创建项目IE兼容处理

    一、白屏处理 IE白屏,基本是JS代码报错,包括app.js报错或者chunk包报错,需要分以下几个步骤解决: 1. 安装sockjs-client包,npm i sockjs-client -D。 2. 安装babel-polyfill包,npm i babel-polyfill -D,并在main.js中引入(在第一行代码引入),import \\\'babel-polyfill\\\'; 3. 在vue.config.js中增加配置:

    2024年02月07日
    浏览(52)
  • 关于基于vue-cli脚手架创建vue项目(图文版)

    目录 一.vue-cli脚手架·概述(来源于官方文档) 二.创建流程 2.1 首先安装node.js,如未安装请移步到:安装node.js 2.2 安装脚手架vue-cli 2.2.1 使用npm install -g @vue/cli命令  2.2.1 使用vue -V 查看版本并检验是否安装成功  2.3 安装vue项目 2.3.1 使用命令 vue create 项目名 ​编辑 2.3.2 这里

    2024年02月07日
    浏览(93)
  • 怎样创建vue项目(分别基于vue-cli和vite两种的创建方式)

    1、安装node.js 1、首先需要安装node.js,推荐下载地址:Node.js 2、检查是否安装成功,使用打开黑窗口的快捷键window+R,输入cmd,在黑窗口输入node -v,如果输出版本号,就说明安装node环境成功, 2、vue-cli搭建Vue开发环境 Vue CLI:命令行界面,俗称脚手架,Vue CLI 是一个基于webpa

    2024年02月02日
    浏览(76)
  • vue-cli自定义创建项目-eslint依赖冲突解决方式

    创建项目步骤 概览: 在安装 npm安装时会报错 依赖冲突原因: @vue/eslint-config-standard@6.1.0 依赖于 eslint-plugin-vue 的 ^7.0.0 版本,但是项目中安装了更高版本的 eslint-plugin-vue 解决方式:降级eslint-plugin-vue到@vue/eslint-config-standard支持的版本 解决后: 再进行npm安装,就能成功

    2024年04月09日
    浏览(51)
  • vue-cli 脚手架创建uniapp项目(微信小程序)

    1、全局安装 vue-cli 脚手架(不建议用 5.0 版本,避免报错) 2、脚手架创建项目 3、选择 默认模板 即可 4、编译并启动项目  5、开发者工具,导入项目,注意路径 \\\"项目地址/dist/dev/mp-weixin\\\" 开发的规范 不能直接在开发者工具中修改代码,口诀:vscode做开发,开发者工具做调试

    2024年02月09日
    浏览(51)
  • vue-cli创建项目、vue项目目录结(运行vue项目)、ES6导入导出语法、vue项目编写规范

    1 vue-cli创建项目 1.1 vue-cli 命令行创建项目 1.2 使用vue-cli-ui创建 2 vue项目目录结构 2.1 运行vue项目 2.2 vue项目的目录结构 3 es6导入导出语法 4 vue项目编写规范 4.1 修改项目 4.2 以后写vue项目,只需要在固定位置写固定代码即可 App.vue HomeView.vue AboutView.vue

    2024年02月07日
    浏览(77)
  • Vue安装过程的困惑解答——nodejs和vue关系、webpack、vue-cli、vue的项目结构

    本文知识来源于《Vue.js+Node.js全站开发实战》,书籍下载地址:https://zlibrary-east.se/book/18202286/fed194(2023.8.31更新) 相信大家都看过下面的Vue安装教程,首先第一步都是安装nodejs,那么为什么要下载nodejs?https://blog.csdn.net/m0_57545353/article/details/124366678 ——因为Node.js是JavaScript的

    2024年02月10日
    浏览(69)
  • vue-cli脚手架创建创建的项目打包后无法正常打开报 Failed to load resource: net::ERR_FILE_NOT_FOUND错误

    亲爱的小伙伴们,你们最近是否有遇到用使用最新的脚手架打包项目后index.html文件无法正常打开,然后控制台报错的情况呢,不要担心,这个坑今天被我踩到了并且被我解决了,下边就让我来给大家分享一下经验吧! 1.找到vue.config.js文件,进行如下配置 即添加一行配置:

    2024年02月15日
    浏览(48)
  • 同时安装vue-cli2和vue-cli3

    vue版本 发布时间 Seed.js 2013年 vue最早版本最初命名为Seed vue-js 0.6 2013年12月 更名为vue vue-js 0.8 2014年1月 对外发布 vue-js 0.9 2014年2月 开始有代号:Animatrix vue-js 0.12 2015年6月 代号:Dragon Ball,在社区有知名度 vue-js 1.0 2015年10月 代号:Evangelion,是 Vue 历史上的第一个里程碑,同年推

    2024年02月11日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包