vue开发环境和创建项目

已于 2023-09-19 15:13:59 修改
阅读量37 收藏
点赞数
分类专栏： vue3 文章标签： vue.js 前端
于 2023-09-19 15:11:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc835297454/article/details/133029717
版权

vue3：需要node15或更高版本（nvm统一管理更为方便），安装cnpm来下载依赖更快捷

vue组件API风格：选项是API（VUE2）和组合API（VUE3）

安装并创建项目：npm init vue@latest

安装cnpm命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

开发环境：vscode+volar扩展（代码不同类型呈现不同颜色）

安装依赖：cnpm install

运行项目：npm run dev

cc835297454
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue安装及环境配置、开发工具
dream_summer的博客
09-29 22万+
vue前端框架的环境搭建。
vue开发环境搭建
热门推荐
sqf251877543的博客
03-20 1万+
node.js是javaScript脚本语言的运行环境。而npm则是Node.js的包管理工具（node package manager），相当于后台的maven。为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。
vue配置开发环境和生产环境
xia_tian666的博客
09-23 9413
本文主要介绍开发、测试以及生产环境的配置。
Vue 集成环境开发及项目创建
ling_xy的博客
07-31 419
文章目录一.环境式安装 一.环境式安装
vue项目配置多环境开发及打包
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
11-18 376
由于项目中可能需要多个开发或打包环境，单一的打包环境无法满足开发需求，故记录此方案 一、在项目的根目录新建你需要的环境 二、配置内容 1，.env.dev 开发正式环境 NODE_ENV = 'development' VUE_APP_URL_ENV = 'development' 2，.env.devtest 开发测试环境 NODE_ENV = 'development' VUE_APP_URL_ENV = 'devtest' ...
搭建vue开发环境
12-09
搭建vue的开发环境： 1、必须要安装nodejs 2、搭建vue的开发环境 ，安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm install --global vue-cli （ 此命令只需要执行一次 ）   3、创建...
搭建vue开发环境.docx
08-18
在本文中，我们将详细介绍搭建 Vue 开发环境的步骤，包括安装 Node、WebStorm、 Vue 项目的创建和启动。 一、工具安装 在开始搭建 Vue 开发环境之前，我们需要安装一些必要的工具。首先，我们需要安装 Node.js。 ...
Django+Vue开发环境框架
05-08
本项目“Django+Vue开发环境框架”提供了一个基础的开发环境，基于python3.6和django3.0，以及Vue CLI 4.3.1版本，确保了稳定性和兼容性。 首先，让我们详细了解一下Django。Django是一个开放源代码的Web应用框架，...
Vue 开发环境初始配置.docx
09-07
在 Windows 系统中，我们需要设置 powershell 的开发权限，以便可以使用 Vue CLI 创建项目和编译代码。 Vue 项目结构说明 在创建了 Vue 项目之后，我们需要了解项目的结构。Vue 项目结构包括了 src 目录、public ...
vue项目打包之开发环境和部署环境的实现
11-21
优雅的解决方案是，分别使用两个入口文件，一个用于开发环境打包，一个用于生产环境打包 具体来说，分为下面几个步骤 1、创建入口文件 在 src 目录下新建 prod_env.js 和 dev.env.js 将main.js 中代码分别拷贝到这两...
Vue3+Element-plus的表单重置
weixin_49352307的博客
07-04 238
1.创建表单,绑定表单数据对象model,并且每一表单需要绑定prop。作用:简化代码,重置表单数据。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1314
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 215
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
新建Vue工程的几种方法
黔肆的博客
07-04 271
新建vue工程的几种方法，关键词：@vue/cli ,vite , parcel , webpack
前端利用vue如何实现导入和导出功能.md
BradenHan的专栏
07-02 1038
xlsx/TOC。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 275
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
vue2 中如何使用 vuedraggable 库实现拖拽功能
微光无限的博客
07-02 261
vue2 中如何使用 vuedraggable 库实现拖拽功能（详细Demo，容易理解）
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 1035
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 59
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
vue 项目 创建开发 生产环境文件
09-14
在Vue项目中，我们可以通过创建不同的配置文件来区分开发环境和生产环境。 首先，我们需要创建两个配置文件：.env.development和.env.production。这两个文件分别对应开发环境和生产环境的配置。 在.env.development文件中，我们可以设置开发环境的配置项。在你提供的引用中，它是以VUE_APP_开头的属性名，比如VUE_APP_BASE_API_D。这些配置项会在执行npm run serve命令时自动加载。你可以在这个文件中设置开发环境所需的配置，如后端API的地址、端口号等。 在.env.production文件中，我们可以设置生产环境的配置项。同样，它也以VUE_APP_开头的属性名来定义配置项。这些配置项会在执行npm run build命令时自动加载。你可以在这个文件中设置生产环境所需的配置，如后端API的地址、端口号等。 注意，为了使配置文件生效，我们需要在Vue项目的配置文件中进行相应的配置。在你提供的引用中，我们可以在config文件夹下的index.js文件中找到相应的配置。在该文件的dev对象中，assetsSubDirectory属性定义了静态资源根目录的子目录sta。你可以根据需要修改这些配置项来适应你的项目需求。 总结起来，创建开发环境和生产环境的配置文件，并在配置文件中设置相应的配置项。在Vue项目的配置文件中，我们可以修改dev对象的属性来定制开发环境的配置。 参考资料： 配置文件 .env.development：开发环境下的配置文件,执行npm run serve命令，会自动加载.env.development文件. .env.production：生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件 js 命名规则 属性名必须以VUE_APP_开头 比如VUE_APP_BASE_API_D js 开发环境中跨域 使用vue-cli创建的项目，开发地址是localhost:8080，...在vue-cli项目中的config文件夹下的index.js配置文件中，修改前的dev： dev: { assetsSubDirectory: 'static', //静态资源根目录的子目录sta 最后使用按钮请求数据 <el-button @click="TestBtn">测试</el-button> import {development} from "@/api/serveApi/development"; TestBtn(){ console.log('不同环境',process.env.VUE_APP_BASE_API_D) development({ },).then(res=>{ console.log(res) }) } //这里导入封装的Api，我们运行开发环境和生产环境分别给的Api前缀不同，就是我们配置的env.development和env.production

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值