Vue创建项目的详细步骤

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

一、安装node.js

1、本例环境

node.js: v16.14.0

npm:8.3.1

vue:@vue/cli 5.0.1

2、node.js环境安装与测试

由于vue的安装与创建依赖node.js(JavaScript的运行环境)里的npm(包管理和分发工具),因此需要先确保安装node.js。

下载地址:Node.js (nodejs.org)

下载完成安装之后,检测一下,查看是否安装成功。

Vue创建项目的详细步骤

检测方式:打开cmd命令窗口(Window + R,输入cmd然后回车),输入 node -v 回车,正常显示node.js版本代表已安装。如上图所示。

npm会随着node.js一起安装,所以,只要是node.js正常安装,就代表npm已经安装。检测方式:cmd命令窗口输入 npm -v 回车,能正常显示npm版本。

Vue创建项目的详细步骤

二、安装vue脚手架:Vue CLI 

下载地址:Home | Vue CLI (vuejs.org)

官方文档说明,安装命令为“npm install -g @vue/cli”。然而,原生npm的下载速度,实在不敢恭维,因此,我们使用淘宝镜像来安装。

命令:npm install -g @vue/cli --registry=https://registry.npm.taobao.org ,安装完成后,cmd命令窗口输入 vue -V(V大写) 回车,能正常显示@vue/cli版本则说明安装成功。

Vue创建项目的详细步骤

三、创建vue项目

 首先我们计划在D盘根目录下创建项目,命令窗口输入 d: 回车,再输入 vue create myvue回车创建myvue文件夹,出现如下图所示Vue创建项目的详细步骤

Default (bable,eslint) // 默认

Manually select features // 选择手动创建项目 (在这里,我们选择手动创建,用上下箭头选择)

Vue创建项目的详细步骤

(*) Babel                                                                    // 支持高阶语法转换

( ) TypeScript                                                             // 支持使用 TypeScript 书写源码

( ) Progressive Web App (PWA) Support                  // 支持PWA

(*) Router                                                                  // 路由

(*) Vuex                                                                     // store

( ) CSS Pre-processors                                            // CSS 预处理器

( ) Linter / Formatter                                                 // 代码风格检查和格式化

( ) Unit Testing                                                          // 支持单元测试

( ) E2E Testing                                                          // 支持E2E测试

回车之后,使用空格键与上下箭头键与图中所选保持一致,然后再点击回车Vue创建项目的详细步骤

选择3.x,回车Vue创建项目的详细步骤

回车之后再次选择No,再次点击回车,此时正在下载依赖包,创建项目Vue创建项目的详细步骤

 下载完成之后则出现下图所示

Vue创建项目的详细步骤

输入:cd myvue  回车,进入myvue项目中

输入:npm run serve 回车,启动服务Vue创建项目的详细步骤

 浏览器地址栏输入 http://localhost:8080/ ,正常打开网页表示项目创建成功,下图所示

Vue创建项目的详细步骤文章来源地址https://www.toymoban.com/news/detail-429658.html

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

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

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

相关文章

  • Vue创建项目的详细步骤

    1、本例环境 node.js: v16.14.0 npm:8.3.1 vue:@vue/cli 5.0.1 2、node.js环境安装与测试 由于vue的安装与创建依赖node.js(JavaScript的运行环境)里的npm(包管理和分发工具),因此需要先确保安装node.js。 下载地址:Node.js (nodejs.org) 下载完成安装之后,检测一下,查看是否安装成功。 检测

    2024年02月01日
    浏览(42)
  • 12.JavaWeb-Node.js+创建Vue项目

            传统的Web服务器中,每个请求都会创建一个线程,这会导致线程数的增加,从而影响服务器的性能和扩展性,Ryan Dahl借助Chrome的V8引擎提供的能力实现了Node.js——可以在服务端运行的JavaScript(可以把Node.js简单的看成JavaScript写的tomcat)         进一步实现前后端分离

    2024年02月12日
    浏览(74)
  • 利用VSCode创建前端vue项目,详细步骤

    1.先创建项目需要放置的文件夹,打开VSCode 2.输入终端指令:vue create wms-web,回车即可创建 3.跳出vue版本选择,根据需要选择版本,这里选择vue2,然后回车 4.等待创建完成… 5.创建成功后,最后显示两行命令:cd wms-web,npm run serve 6.根据命令输入cd wms-web,进入wms-web项目,输入

    2024年04月14日
    浏览(42)
  • nvm、node、vue安装、vue项目创建打包

    nvm作用: 可以管理多个版本的node , 切换node版本 , 下载node 。 参 考:https://zhuanlan.zhihu.com/p/519270555 下载地址:https://github.com/coreybutler/nvm-windows/releases 前面下载安装 一、2 一、3 把路径配置到PATH中 经过测试,应该把 环境变量 配置 到全局模块 即可: D:DevelopAppNodeNvmAllN

    2024年02月09日
    浏览(77)
  • vue2引入Element UI组件去创建新页面的详细步骤--项目阶段2

    目录 一、Element UI介绍 Element UI的特点: 二、下载配置Element UI (零)创建vue项目 (一)下载Element UI依赖   (二)全局文件main.js中引入Element UI 三、删除多余的东西  (一)删除App.vue多余的  (二)删除多余的页面  (三)删除router路由多余的  四、新建vue页面 (一)新建

    2024年02月07日
    浏览(52)
  • Vue的路由使用,Node.js下载安装及环境配置教程 (超级详细)

    前言: 今天我们来讲解关于Vue的路由使用,Node.js下载安装及环境配置教程 首先我们Vue的路由使用,必须要导入官方的依赖的。 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 https://www.bootcdn.cn/ 路由思路 1、引入路由的js依赖 2、定义组件内容用来显示网页中的内容 3、定义

    2024年02月07日
    浏览(61)
  • vue3创建项目报错Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_ut

    报错信息: Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_util.parseArgs) is not a function     at init (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_modulescreate-vueoutfile.cjs:4481:72)     at Object.anonymous (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_module

    2024年04月10日
    浏览(163)
  • npm 创建 node.js 项目

    package.json重要说明 package.json是创建任何node.js项目必须要有的一个文件。 因为在package.json文件中,有详细的项目描述, 包括: (1)项目名称:name (2)版本:version (3)依赖文件:dependencies 等等.. 1. 创建node.js项目步骤 (1) 创建package.json文件 (2) 运行npm install 创建node_modules这个文件夹

    2024年02月11日
    浏览(53)
  • 2023 最新版IntelliJ IDEA 2023.1创建Java Web前(vue3)后端(spring-boot3)分离 项目详细步骤(图文详解)

    2023 最新版IntelliJ IDEA 2023.1创建Java Web 项目详细步骤(图文详解) 本篇使用当前Java Web开发主流的spring-boot3框架来创建一个Java前后端分离的项目,前端使用的也是目前前端主流的vue3进行一个简单的项目搭建,让你距离Java全栈开发更近一步 🏴‍☠️。 使用版本: “17.0.1”

    2024年02月12日
    浏览(88)
  • node.js下载和vite项目创建以及可能遇到的错误

    目录 一、node.js的下载 1、去官网下载   节点.js (nodejs.org) 2、下载过程 第一步: 第二步: 第三步: 第四步: 第五步: 二、vite项目的创建(使用的工具是Hbuilder x) 第一步:  出现报错 Need to install the following packages:  create-vite-app@1.21.0 第二步: 第三步:  三、可能出现的报

    2024年02月03日
    浏览(57)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包