【vue create】一.使用vue creat搭建项目

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

场景:使用vue create脚手架快速搭建vue的项目
前提:需要安装node.js和cnpm以及yarn
并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索

1.使用dos命令安装vue-cli脚手架

//这个是从镜像源下载
cnpm install -g @vue/cli 

查看安装的版本(显示版本号说明安装成功)

vue --version

vue-create,vue,vue.js,javascript,前端

2.使用vue create命令搭建vue项目

1.cmd窗口跳到需要新建项目的文件夹下,使用vue create

//vuetest是我的项目名
vue create vuetest

2.我这里选择第三个Manually select features自定义选项操作并回车(至于第一个和第二个选项可以快速搭建带eslint和babel的项目)
vue-create,vue,vue.js,javascript,前端
3.选择配置项
我这里选择了Babel、Router、Vuex、Linter/Formatter三个选项,然后回车
vue-create,vue,vue.js,javascript,前端4.选择vue的版本
我这里选择第二个2.X,然后回车
vue-create,vue,vue.js,javascript,前端
5.选择router的模式
vue-router分为两种模式

hash
history

**hash:**
特征:
1.hash会在浏览器路径里带#号,比如http://locahost:8080/#/index
2.hash在浏览器改变路径触发页面跳转,即前进后退,但不会重新加载页面。
3.hash传参是基于url,如果要传递复杂的参数会有体积的限制


**history**
特征:
1.可以在url放参数,而且也可以将数据存放在一个特定的对象中,其利用HTML5 History inteface中新增的pushState()replaceState()方法(限制:history只支持IE8以上)

2.需要后台配置支持,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.test.com/user/id 如果后端缺少对 /user/id 的路由处理,将返回 404 错误。

我这里使用router路由的history模式,输入Y,然后回车(如果使用hash,则输入n)
vue-create,vue,vue.js,javascript,前端
6.代码语法错误检查
我这里选择ESLint + Standard config,这个是标准的,然后回车
vue-create,vue,vue.js,javascript,前端
7.选择检查代码语法的时机
我这里选择第一个Lint on save,然后回车
vue-create,vue,vue.js,javascript,前端8.第三方配置文件存在的方式
我这里选择第一个In dedicated config files,然后回车
vue-create,vue,vue.js,javascript,前端
9.是否保存本次配置为预设项目模板
我这里选择N(也可以选择Y,这样下次可以直接使用该配置方案快速搭建项目),然后回车,则项目搭建成功
vue-create,vue,vue.js,javascript,前端10.搭建成功的示例
vue-create,vue,vue.js,javascript,前端
11.打开项目安装依赖
在终端输入如下代码,安装依赖包

yarn install

vue-create,vue,vue.js,javascript,前端
13.启动项目
在终端输入如下代码,然后回车启动项目

yarn serve

vue-create,vue,vue.js,javascript,前端放在浏览器预览
vue-create,vue,vue.js,javascript,前端
注意点:
1.我的npm版本是8.5.0 ,node版本是16.14.2 , yarn版本是1.22.18,
vue-cli版本是5.0.8,cnpm版本是8.2.0
vue-create,vue,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-734816.html

到了这里,关于【vue create】一.使用vue creat搭建项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【源码】Vue.js 官方脚手架 create-vue 是怎么实现的?

    本文共分为四个部分,系统解析了 vue.js 官方脚手架 create-vue 的实现细节。 第一部分主要是一些准备工作,如源码下载、项目组织结构分析、依赖分析、功能点分析等; 第二部分分析了 create-vue 脚手架是如何执行的,执行文件的生成细节; 第三部分是本文的核心部分,主要

    2024年02月09日
    浏览(45)
  • react create-react-app v5 从零搭建项目(不暴露 eject)

    好久没用 create-react-app做项目了,这次为了个h5项目,就几个页面,决定自己搭建一个(ps:mmp 好久没用,搭建的时候遇到一堆问题)。 我之前都是使用 umi 。后台管理系统的项目 使用 antd-pro框架。实际上antd-pro 是基于umi搭建集成的框架。里面封装好了各种东西,开箱即用。

    2024年02月07日
    浏览(35)
  • vue3使用setup代替created

    vue2中的created可使用vue3中的setup()来代替。 setup() :开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method。 如果想要在页面创建时就执行方法, vue2: vue3: vue3使用setup语法糖:

    2024年02月11日
    浏览(51)
  • ChatGPT:概述Vue.js中data函数初始化和created钩子函数调用的顺序和问题解决方法

    我将输入一段Vue代码,请你记住: ChatGPT: 你提供的代码是一个Vue.js组件中的 data 和 created 部分。这部分代码包含了组件的数据和生命周期钩子函数。 在 data 中,你定义了一些数据属性,包括查询信息、分页信息、总记录数、表格数据以及一些表单相关的数据和控制属性。

    2024年02月09日
    浏览(51)
  • 使用create-react-app创建react项目

    全局安装create-react-app 使用create-react-app创建一个项目 如果不想全局安装,可以直接使用npx 这需要等待一段时间,这个过程实际上会安装三个东西 react: react的顶级库 react-dom: 因为react有很多的运行环境,比如app端的react-native, 我们要在web上运行就使用react-dom react-scripts: 包含运

    2024年02月11日
    浏览(37)
  • vue中created、watch、methods的区别,一般如何使用,在什么场景下使用

    在Vue中, created 、 watch 和 methods 是Vue实例中常用的三个选项。它们的作用和使用场景如下: created : 作用: created 是Vue实例生命周期钩子函数之一,在Vue实例创建完成后立即调用。在 created 钩子函数中,可以执行一些初始化逻辑、数据请求和监听事件等操作。 使用场景:一

    2024年02月11日
    浏览(45)
  • react create-react-app v5 从零搭建(使用 npm run eject)

    好久没用 create-react-app做项目了,这次为了个h5项目,就几个页面,决定自己搭建一个(ps:mmp 好久没用,搭建的时候遇到一堆问题)。 我之前都是使用 umi 。后台管理系统的项目 使用 antd-pro框架。实际上antd-pro 是基于umi搭建集成的框架。里面封装好了各种东西,开箱即用。

    2024年02月07日
    浏览(41)
  • vue 初始化方法 create,beforeMount,mount,computed,watch 方法执行顺序及使用场景

    前言:vue 存在一些基本属性和相关对象如果合理使用,可以避免代码混乱 执行顺序 create beforeMount computed mounted watch 方法说明 created执行时挂载阶段还没有开始,模版还没有渲染成html,所以无法获取元素。created钩子函数主要用来初始化数据。 beforeMount 这一步的时候,模版已经

    2024年02月11日
    浏览(52)
  • Creating WebAR Applications Using JavaScript and Node.j

    作者:禅与计算机程序设计艺术 Augmented Reality(AR)是一种利用现实世界中的图像、声音、或其他媒体来增强现实的技术。它能够将虚拟对象投射到真实世界中,使得用户可以参与其中并进行交互。Web AR应用程序(Web AR App)就是在网页浏览器上运行的AR应用。本文将介绍如何通过

    2024年02月06日
    浏览(51)
  • react快速开始(三)-create-react-app脚手架项目启动;使用VScode调试react

    create-react-app(以下简称cra)作为react官方提供的脚手架工具,是目前生成react项目一个非常常用和主流的工具。很多企业级的应用搭建也是基于这个脚手架工具上二次开发 create-react-app脚手架 生成的 package.json中 scripts如下: 我们看到分别是项目的启动开发环境,构建,测试的

    2024年02月10日
    浏览(59)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包