Vue3环境安装即项目搭建

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

搭建Vue 环境

npm 安装vue3,前端,vue.js,javascript,前端,vue

1 下载 node.js

node.js 中文网 https://nodejs.org/zh-cn/cn/ 下载合适的安装包

2 配置环境 (安装时系统自动配置环境变量)

  1. 进入系统环境变量界面
  2. 选择系统变量 path 点击新建
  3. 查看是否有node.js 的安装路径

3 查看版本

  1. 查看 node 版本命令:node -v
  2. 查看 npm 版本命令 npm - v

npm 安装vue3,前端,vue.js,javascript,前端,vue

4 安装淘宝镜像,有利于加快下载速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

检测 cnpm -v

npm 安装vue3,前端,vue.js,javascript,前端,vue

5 下载vue-cli (vue脚手架),用于搭建vue

使用 npm 下载:  -g 表示全局安装
npm install -g @vue/cli
使用 cnpm 下载  速度会更快一点
cnpm install -g @vue/cli

检查版本 vue --version 或者 vue -V

npm 安装vue3,前端,vue.js,javascript,前端,vue

6 现在即可创建vue项目了

1 第一种方式 使用命令行界面

  1. 进入你需要保存vue文件的文件夹,在目录输入 cmd ,或者直接打开命令行界面 cd 到保存vue文件的文件夹。
    输入 vue create vue项目名 比如:
    vue create test
    npm 安装vue3,前端,vue.js,javascript,前端,vue

  2. 选择创建项目模板 这里我们选择自定义 按 上下方向键 切换版本,选中第三个选项 回车
    npm 安装vue3,前端,vue.js,javascript,前端,vue

  3. 这里是选择项目初始化需要的模块 这里可以根据需要选择,我们一般需要
    Eable Router Vuex
    按 空格键 选择 选择好后回车即可
    npm 安装vue3,前端,vue.js,javascript,前端,vue

  4. 选择初始化 vue版本 我们选 3.x 回车

npm 安装vue3,前端,vue.js,javascript,前端,vue

路由器使用历史模式?(需要适当的服务器设置以便在生产中实现索引回退)(Y/n) 输入 n 回车
你喜欢把配置Babel, ESLint等放在哪里? 选 in package.json 回车
npm 安装vue3,前端,vue.js,javascript,前端,vue

最后一个也选 输入 n 回车 后项目开始初始化

5.初始化完毕后 开启项目 分别复制弹出的代码 运行项目
npm 安装vue3,前端,vue.js,javascript,前端,vue

npm 安装vue3,前端,vue.js,javascript,前端,vue

打开网址 查看自己的vue项目

npm 安装vue3,前端,vue.js,javascript,前端,vue

npm 安装vue3,前端,vue.js,javascript,前端,vue

2 网页方式创建 vue项目

在 命令行界面 输入 vue ui

npm 安装vue3,前端,vue.js,javascript,前端,vue

机会打开网页 具体操作与以差不多,可以自行尝试

npm 安装vue3,前端,vue.js,javascript,前端,vue

一些用用的指令:文章来源地址https://www.toymoban.com/news/detail-816307.html

重新更新模块
npm install  
查看当前目录下安装的node包
npm list				
引入 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
运行项目
npm run serve
打包项目
npm run build
安装  vue 3 脚手架 vue-cli
npm install -g @vue/cli
安装 vue 2  j脚手架 
npm install -g vue-cli
卸载 vue-cli
npm uninstall -g vue-cli
引入 axios
npm install axios --save
引入 qs
npm install qs--save
引入 jquery
npm install jquery --save;
引入 bootstrap
npm install bootstrap --save
查找 vue路径
where vue

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

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

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

相关文章

  • Vue3安装配置、开发环境搭建(组件安装卸载)(图文详细)

    本文目录: 一、vue的主要安装使用方式 二、node.js安装和配置 1、支持运行 Node.js的平台 2、Node.js 版本开发发布时间表(日期可能会有变化) 3、下载安装node.js 4、node.js环境配置 (1)、检查node 和npm版本信息 (2)、配置npm下载时的默认安装目录和缓存日志目录 (3)、npm配置

    2024年02月04日
    浏览(62)
  • Vite+Vue3项目如何获取环境配置,并解决前端跨域问题

    根目录新建.env.development和.env.production文件 package.json配置启动参数 vite命令启动项目时,指定mode参数,加载vite.config.ts文件。 配置代理 在vite.config.ts中配置代理 配置vite-plugin-html 通过vite-plugin-html组件,可以将配置文件中的数据,绑定到index.html中,可以实现不同环境的页面ti

    2024年02月19日
    浏览(62)
  • vite搭建vue3项目本地环境自定义域名及端口配置

    本blog讲述的是vite直接创建的vue3的项目的本地环境自定义域名配置。 windows 首先配置本地的一个域名代理指向。 在windows环境下host文件的位置是 C:WindowsSystem32driversetc 我们需要打开目录下的hosts文件然后在 其中找到127.0.0.1然后在后面追加一行 Mac 在mac系统中我们需要打开终

    2024年02月06日
    浏览(121)
  • Web前端VScode/Vue3/git/nvm/node开发环境安装

    目录 1 基本配置 2 安装vscode 3 安装vue 4 配置bash 5 安装nvm 6 安装node 7 安装yarn 8 新建项目 9 运行helloworld 本篇是为了做前端开发的环境而写。使用的操作系统是windows 10 64位 现在做vue和node基本就是vscode和webstorm,本篇就是用vscode。 可以从主页直接下载 选择windows版本下载即可。

    2024年02月04日
    浏览(58)
  • 二、搭建前后端分离的自动化测试平台的前端Vue3+Element-plus前端项目

    1、Node获取地址 https://nodejs.org/en/download 一直默认选项安装,安装好了之后,在环境变量中会自动配置Node的地址,可以在cmd中使用 node -v/npm -v命令验证是否下载成功 2、设置Node的配置内容 (1)在安装目录下新建两个文件夹命名为node_cache,和node_global: 其中 node_cache 是作为 缓

    2024年02月06日
    浏览(52)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)一:项目规划及初始化

      使用vue3+Layui实现通用管理系统前端,使用vue3+layui搭建系统UI界面,使用nodejs搭建模拟web服务器,使用echarts实现系统可视化模块,可以此项目为基础进行扩展开发,快速搭建管理系统,具体内容如下:    1. 常见功能实现: 实现用户登录(用户名密码登录、手机验证码

    2024年02月13日
    浏览(55)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第4篇:静态结构搭建和路由配置,1. 准备分类组件【附代码文档】

    Vue3+ElementPlus+Pinia开发小兔鲜电商项目完整教程(附代码资料)主要内容讲述:认识Vue3,使用create-vue搭建Vue3项目1. Vue3组合式API体验,2. Vue3更多的优势,1. 认识create-vue,2. 使用create-vue创建项目,1. setup选项的写法和执行时机,2. setup中写代码的特点。什么是pinia,创建空Vue项目并安装

    2024年04月11日
    浏览(46)
  • 解决vite+vue3项目npm装包失败

     报错如下:  Failed to remove some directories [ npm WARN cleanup   [ npm WARN cleanup     \\\'D:\\\\V3Work\\\\v3project\\\\node_modules\\\\@vue\\\', npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir \\\'D:V3Workv3projectnode_modules@vuereactivitydist\\\'] { npm WARN cleanup       errno: -4048, npm WARN cleanup       code: \\\'EPERM\\\', npm W

    2024年02月14日
    浏览(38)
  • Vue3-01-Vue3 新特性及环境搭建

    Vue.js是一种被广泛使用的JavaScript框架,用于构建用户界面和单页面应用。Vue3是其最新的主要版本,引入了许多新特性并做了一些改进。 Vue2 和 Vue3 在数据响应性系统的实现上采用了不同的方式:Vue2 使用 Object.defineProperty,而 Vue3 则选择了 Proxy。 (1) Vue2:Object.defineProperty 在

    2024年02月07日
    浏览(48)
  • Vue3+Vite+Pinia+Naive项目搭建之二:scss 的安装和使用

    前言 如果对 vue3 的语法不熟悉的,可以移步 Vue3.0 基础入门,快速入门。 github 开源库:Vue3-Vite-Pinia-Naive-Js gitee   开源库:Vue3-Vite-Pinia-Naive-Js 1. 安装依赖  2. 新增 src/assets/style/reset.scss 页面样式初始化 3. 新增 src/assets/style/common.scss 共用样式 4. 新增 src/assets/style/utils.scss 工

    2024年02月12日
    浏览(55)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包