Vue项目的创建

创建Vue项目 使用vite创建vue项目 阅读详情

前置: 电脑中安装好 npm

Vue项目的创建

  1. 安装 vue-cli vue的脚手架
    npm install -g vue-cli 全局安装
  2. 使用脚手架构建 vue项目
    准备好项目文件夹,运行命令 vue init webpack 项目名称
    全部保持默认,按回车即可
  3. 安装需要的插件,如vuex ,element-ui ,axios等
    cd 项目名称
    npm install vuex --save
    npm i element-ui -S
    npm i axios -S
    …
  4. 注册插件
    打开src/main.js文件
    导入插件
  import Vuex from 'vuex'
  import axios from 'axios'
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'

注册:
Vue.prototype.$axios = axios
Vue.use(ElementUI)
Vue.use(Vuex)

注意: Vuex创建好的实例还需要挂载在 Vue实例中
在这里插入图片描述

  1. 创建需要的文件夹,如 views, store 文件夹
    在这里插入图片描述
  2. 启动项目
    npm run dev
Vue脚手架搭建以及创建Vue项目流程_脚手架创建vue项目 node_cache和node_global是后面创建的文件夹,后面有讲到,创建的位置,我在这里放到了node.js文件夹下,也可以自定义文件夹路径四个path分别代表:添加了NODE_PATH这个变量名,添加这个名下面的两个文件夹等,最后那个路径也要配一下,不然安装淘宝镜像会有问题效果:提示:如果碰到下面情况可能原因:可能是C:\Users\Administrator(users)目录下的.npmrc里的配置问题,把里面的文件改成自己需要的路径,比如我想放到node.js文件夹下。 阅读详情

相关推荐

Rasa Core开发指南

文章目录1. Rasa Core简介1.1 Rasa Core消息处理流程1.2 安装Rasa Core2. Dialogue模型训练2.1 Story样本数据2.2 Domain2.2.0 intents2.2.1 actions2.2.2 templates2.2.3 entities2.2.4 slots3 .训练和使用对话模型3.1 训练对话模型3.2 使用对话模型4. 搭建CustomA...

老蒋也疯狂 1万+

Vue工程创建及应用

基于JavaScript实现的一个前端框架,用于构建用户界面。 其最大的特点是**响应式数据驱动**。页面由数据生成,当数据改变,页面同步更新。 这样可以简化DOM操作,自动地由数据操作对应DOM元素。

我是程序员Amin,关注我,带你学习有趣的计算机知识 1090

手把手教程:使用C#实现工业上位机开发

深入讲解如何利用C#进行上位机开发,涵盖通信协议与界面设计,助力掌握工业自动化核心技能。结合实际案例,让上位机开发更高效直观。

weixin_32480007的博客 2064

Vuejs实例-使用vue-cli创建项目

1,首先从官方网站下载安装Node.js,建议使用6.x版本,同时也会一并安装npm工具,npm>3.10以上。   2,npm安装很慢(国外服务器),所以一般推荐使用npm淘宝镜像cnpm,先安装下cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 安装好cnpm后,以后使用npm的地方就可以使

long0801的博客 1137

3、硬件工程师笔试面试学习汇总——器件篇目录(2025版本)

硬件工程师笔试面试学习

XU157303764的博客 7620

Vue+element如何创建一个项目?

我们在前端学习中,学会了HTML、CSS、JS之后一般会选择学习一些框架,比如Jquery、AngularJs等。今天司科总结的是如何创建一个Vue项目。 相关技术:   vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。   element:基于vuejs2.0的ui组件库。   vue-router:一般单页面应用spa都要用到的前端路由。 ...

juzimvp的博客 2411

《计算机视觉:从入门到精通》技术手册 第1章 计算机视觉概述与历史演进

视觉感知与机器视觉在工程实践中常被混用,但二者存在本质差异。视觉感知强调对光学信号的语义理解与场景解释,核心在于从二维投影重建三维世界的物理与语义属性。该领域关注遮挡处理、光照变化、材质反射等复杂因素的建模,其目标是实现类似人类视觉系统的场景理解能力。机器视觉则侧重于工业场景中的精密测量与控制,通常基于结构化光源、已知几何约束与标定参数,执行边缘检测、尺寸测量、位置定位等任务。前者面向开放环境的通用理解,后者面向受控环境的精确执行。

u012133341的博客 269

idea创建vue项目(转载)

IDEA下新建Vue项目 1、首先需要安装nodeJS,并配置全局环境变量。 2、在IDEA中新建一个空的project 3、在setting中配置JavaScript的语言版本为6     在file types的html中添加.*vue      4、在插件库中添加vue.js插件          5、在IDEA中打开Terminal编辑器(Alt+F12),检查node.js和npm是否

暴走的山交君的博客 1419

17|CI/CD 集成与质量门禁:让精准测试进入发布流水线

本文讲解精准测试如何接入 CI/CD 流水线,并通过质量门禁辅助发布决策。测试开发工程师。Java 后端开发工程师。质量平台 / DevOps 平台建设者。想了解精准测试落地方法的技术负责人。

专注 AI 精准测试平台实战落地,分享从代码 Diff 到回归决策的完整工程闭环。主张“先建数据链路,再上 AI 智能”,让测试从“靠经验”走向“基于风险”。 65

【Bug已解决】zsh: command not found: claude 解决方案

方案适用场景推荐指数难度方案一:配置 npm 全局目录所有平台,长期使用⭐⭐⭐⭐⭐低方案二:修复 PATH 变量快速修复,不想改 npm 配置⭐⭐⭐⭐低方案三:重建软链接文件存在但链接断裂⭐⭐⭐中方案四:nvm 专属方案使用 nvm 管理多版本 Node.js⭐⭐⭐⭐低方案五:Windows 专属Windows 系统⭐⭐⭐⭐⭐低方案六:Homebrew 安装macOS 用户,npm 有问题⭐⭐⭐低根本原因。

博客 1万+

vue创建项目中遇到的问题

VsCode新建VueJs项目的详细步骤 —es问题需要注意 https://www.jb51.net/article/124406.htm 创建vue项目的过程中出现 关于npm audit fix 的解决方法 https://blog.csdn.net/weixin_40817115/article/details/81007774 ...

qq_39990827的博客 338

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

vuejs的入门<1>创建项目

➜ Local: http://localhost:5173/ 把http://localhost:5173/ 复制的浏览器。cd aaa 进入刚创建的项目aaa 复制到ccmd ctrl +c是cmd的复制键 ctrl +v粘贴。Scaffolding project in D:\Bootstrap\2\aaa…D:>cd D:\Bootstrap\2 进入已创建的目标文件夹创建项目。(y) y 可以选no。

SS1388163的博客 439

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

Idea创建vue项目

点击locoal就可以跳转了。

Jeremy486的博客 4327

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

vue-cli(vuejs 脚手架)创建一个项目

在一个大型的项目里,把所有的代码都放到一个文件里显然是不现实的,所以在实际做项目的时候,我们都会把他们分类放到不同的文件里面,使它们尽可能的小,这样也便于后期的维护和管理。 根据项目的功能需求,划分出不同的功能模块,然后建立相关的文件夹进行统一的管理。这种管理访问一般我们叫做 工程化 管理。 什么是 vue-cli 当我们的 vuejs 项目一定大的时候,我们也要考虑一下这种工程化的管理模式,vu...

ghost_violets的博客 403

vscode创建vue项目

一、前情提要只适用于已安装node、修改过淘宝镜像等前期准备工作,直接开始进行项目创建。二、创建新项目1、先创建一个文件夹,也可以通过VSCode打开已有文件夹。(此文件夹为新创建项目的上级文件夹)2、选中打开的文件夹,点击右上角打开终端,也可以通过查看打开终端3、切换Command Prompt4、输入npm create vite@latest,再输入项目名称->回车->选中vue,不知道怎么选就一直回车完成接下去的选项(

小白_L的博客 1万+

VUE2创建项目

模式:URL 中会带有 “#” 符号,如http://example.com/#/home ,“#” 后面的部分是路由的路径,它的改变不会引起页面的重新加载,浏览器会根据 hash 值的变化触发hashchange事件,Vue Router 利用这个特性实现路由跳转。:也是一款流行的 CSS 预处理器,和 Sass 类似,提供变量、混合、嵌套规则等功能,语法简洁,在大型项目中使用可以有效组织和管理 CSS 代码,并且与许多前端框架和构建工具都有良好的集成。:代表 Vue 2 版本。

csdn_HPL的博客 6445

创建vue项目的几种方式

最近一段时间在学习vuejs和element-ui、iview-ui这些前端知识,在创建vuejs项目时发现有几种不同的方法: 使用vue-cli脚手架创建新vuejs项目 用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构 前提条件:已安装node可以正常使用npm命令,并全局安装vue-cli工具。 nodejs可以到nodejs官网下载最新的版本,根据自己的操作系统选择合适的...

ccf19881030的专栏 1万+

创建简单vue项目 / Webpack创建vue项目

创建简单vue项目 / Webpack创建vue项目 2. vue.js 为2.0 上面选择的vue.js为3.0,若选择vue.js 为2.0

weixin_45941687的博客 5426

vue项目创建以及运行

一、创建一个vue项目 1. 创建项目 # 全局安装 vue-cli npm install --global vue-cli #创建一个基于webpack模板的新项目 vue-init webpack projectname 2. 安装项目依赖 cd projectname npm install 二、webpack打包...

l2535460824的博客 396

vuejs 学习一 项目的创建

VUE 创建项目 首先要确保电脑上已经安装了NODEJS环境,如果没有请自行百度安装。 1 安装脚手架:(CNPM与NPM效果一样,但是是从国内网站上下载资源,速度会快一些。如果没有安装CNPM 请自行百度安装) npm install -global vue-cli 或者 cnpm install -global vue-cli 2 创建项目 通过如下命令,执行后选择...

zhangyunfei1984的博客 167

vscode中前端vue项目详解_vs code 第一次创建前端项目 vuejs 从零开始

2018年12月5日第一阶段虽然网上教程很多,但是还是记录一次完整的步骤1.安装nodejs,网上一堆的教程,基本上下载后傻瓜式一路next2.安装npm,网上一堆的教程,也是基本下载后傻瓜式一路next3.安装完成运行cmd,查看是否安装成功4.安装cnpm由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm。在命令行中...

weixin_39936403的博客 330

【VueJS】windows环境安装vue-cli及webpack并创建VueJS项目

1. 安装node.js, Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。 这次node.js不是主角,默认已安装好了,通过npm –v查看node.js是否安装好以及安装的node.js版本 如果你安装的是旧版本的 npm,可以通过 npm 命令“npm install npm -g”来进行版本升级。 ...

251

vueJs初探-创建第一个vue项目

***日常笔记*** 1.所需模块: --①Node.js:JavaScript运行环境 --②npm:Nodejs下的包管理器,这里推荐各个大神使用的淘宝NPM镜像进行安装(http://npm.taobao.org/) --③webpack:JavaScript 应用程序的静态模块打包器(module bundler) --④vue-cli:用户生成Vue工程模板 2.安装Node...

weixin_30474613的博客 176
上一篇: Mac虚拟机实现ios UI自动化教程-最新版本(MacOS 12.1,ios15.1)
下一篇: python setattr方法动态为类创建方法
木 叶
博客等级 码龄7年 20粉丝 76原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值