vue项目的环境准备与创建详情

news2024/11/27 0:41:29

如何搭建一个vue项目

一、环境准备

1、安装node.js

  • 下载地址：https://nodejs.org/zh-cn/
  • 界面展示
    在这里插入图片描述

2、检查node.js版本

  • 查看版本的两种方式
1|node -v
2|node -version
  • 出现版本号则说明安装成功（最新的以官网为准）
    在这里插入图片描述

3、为了提高我们的效率，可以使用淘宝的镜像源

  • 输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源

  • 以后再用到npm的地方直接用cnpm来代替就好了，因为没有镜像源的话，安装速度比较慢
    在这里插入图片描述

  • 检查是否安装成功：cnpm -v
    在这里插入图片描述

4、vue 的调试工具

  1. 安装 vue-devtools 调试工具
    vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。
    Chrome 浏览器在线安装 vue-devtools ：
    https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
    FireFox 浏览器在线安装 vue-devtools ：
    https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

  2. 配置 Chrome 浏览器中的 vue-devtools
    点击 Chrome 浏览器右上角的 按钮，选择更多工具 -> 扩展程序 -> Vue.js devtools 详细信息，并勾选如下
    的两个选项：
    在这里插入图片描述

  3. 使用 vue-devtools 调试 vue 页面
    在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools
    调试当前的页面。
    在这里插入图片描述

二、搭建vue环境

1、全局安装vue-cli

  • 这里注意：安装vue-cli对node.js的版本是有要求的
    在这里插入图片描述

  • 装的两种方式：输入cmd命令

1|npm install -g @vue/cli //这个是从国外下载的比较慢
2|cnpm install -g @vue/cli //这个是从镜像源下载
  • 查看安装的版本（显示版本号说明安装成功）
1|vue --version

在这里插入图片描述

  • 如果你原来有版本或者版本比较低，可以升级
1|npm update -g @vue/cli
2|yarn global upgrade --latest @vue/cli

三、创建vue项目

1、用cmd命令创建项目

1.1创建文件
  • 以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹
    输入：vue create vue01
1.2选择配置信息

通过上下方向键选择对应配置，然后回车
在这里插入图片描述

  • 按空格键选择要安装的配置资源，带 * 号说明被选上了
    在这里插入图片描述
1.3选择版本
  • 上下方向键选择版本，这里我们选择vue2，然后回车
    在这里插入图片描述
1.4路径模式选择
  • 这里可以不用管，直接输入 no/n
    在这里插入图片描述
1.5语法代码格式检查
  • 代码检查，选标准的就行，方向键切换，空格键选择然后回车
    在这里插入图片描述
  • 代码检查时间，方向键切换，空格键选择然后回车
    在这里插入图片描述
1.6第三方文件存在的方式
  • 1.独立的文件 2.综合的
    在这里插入图片描述
1.7是否保存本次配置信息（保存预设）

这里如果选择保存的话，就要输入名字，默认就是文件夹的名字，下次配置的时候就会显示这个文件配置的选项就像上面的一样，在配置的时候会多出来一个
在这里插入图片描述

1.8创建成功

Successfully created project vue01出现这个说明创建成功
在这里插入图片描述

1.9运行
  • cd到项目文件夹下面
cd vue01

在这里插入图片描述

  • 输入代码运行文件
npm run serve

在这里插入图片描述

1.10启动
在浏览器输入对应的网址就可以看到界面啦
http://localhost:8080/
在这里插入图片描述

1.11停止服务
  • 两下Ctrl+C 或者Ctrl+C一下然后Y
    在这里插入图片描述

2、用vue资源管理器创建

2.1进入vue资源管理器界面（vue ui界面）

  • cmd命令，因为是全局的，所以在哪里打开都行，注意：运行的时候不能关闭cmd窗口，不然就停止服务了，如果电脑太卡，可以直接在浏览器输入：http://localhost:8000/
vue ui

在这里插入图片描述

在这里插入图片描述

2.2创建文件

1.这里直接create 创建文件
在这里插入图片描述

2.3配置信息

和用cmd命令差不多，填完之后下一步
在这里插入图片描述

2.4配置预设

选择预设，或者自定义，然后下一步完成创建
在这里插入图片描述

2.5启动运行项目

按步骤来：任务>serve>运行>启动
在这里插入图片描述

四、Vue-cli工程中每个文件夹和文件的用处

  • dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署
  • node_modules：存放npm命令下载的开发环境和生产环境的依赖包
  • public：有的叫assets：存放项目中需要用到的资源文件，css、js、images以及index
  • src文件夹：存放项目源码及需要引用的资源文件
  • src-api文件夹：放ajax相关操作的代码文件:index.js(相关的接口),ajax.js(封装的axios,拦截器)。有的叫service：自己配置的vue请求后台接口方法
  • src-common文件夹：stylus的混合文件.styl，不要写到public也可以
  • src-components文件夹：存放vue开发中抽离的一些公共组件
  • src-mock文件夹：mock数据存放文件及mock模拟接口（没有后台接口或接口不完整情况下可以模拟后台接口）
  • src-pages文件夹：涉及到路由的组件
  • src-router文件夹:vue-router，路由器及路由的配置
  • src-store文件夹：存放 vue中的状态数据，用vuex集中管理
  • App.vue文件：使用标签渲染整个工程的.vue组件
  • main.js文件：vue-cli工程的入口文件
  • package.json文件：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理
  • build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库
  • config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同，常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1186163.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vite创建React项目，另外一种更加简单的方法

Vite创建React项目，另外一种更加简单的方法

在上一篇blog中一个一个安装依赖dependencies，有没有一步到位的方法呢，有! 参考《React 18 Design Patterns and Best Practices Design, build, and deploy production-ready web applications with React》4th 第一章倒数第二节Vite as a solution有个…
阅读更多...
docker形式简易部署kibana

docker形式简易部署kibana

文章目录 前言一、简易部署1.获取镜像2.启动应用4.访问页面5.总结 前言 记录下使用docker部署kibana服务的过程 一、简易部署 1.获取镜像 docker pull kibana:8.8.0[rootnginx ~]# docker pull kibana:8.8.0 8.8.0: Pulling from library/kibana Digest: sha256:a23d96ae0ae…
阅读更多...
​软考-高级-信息系统项目管理师教程 第四版【第21章-项目管理科学基础-思维导图】​

​软考-高级-信息系统项目管理师教程 第四版【第21章-项目管理科学基础-思维导图】​

软考-高级-信息系统项目管理师教程 第四版【第21章-项目管理科学基础-思维导图】 课本里章节里所有蓝色字体的思维导图
阅读更多...
JVM虚拟机：垃圾回收器之Serial Old(老年代)

JVM虚拟机：垃圾回收器之Serial Old(老年代)

本文重点 本文将介绍垃圾回收器在老年代中的串行回收器Serial Old。 介绍 Serial Old是Serial垃圾回收器的老年代版本，它同样是单线程的收集器，使用标记-整理算法，这个收集器也主要运行在Client，目前它主要是作为老年代的CMS收…
阅读更多...
高德地图 web js端 出现 INVALID_USER_SCODE 10008 MD5安全码未通过验证

高德地图 web js端 出现 INVALID_USER_SCODE 10008 MD5安全码未通过验证

图片意思就是在引入 高德js和css 链接前 引入 <script type"text/javascript">window._AMapSecurityConfig {securityJsCode:您申请的安全密钥,} </script> 到这里就完美结束了
阅读更多...
案例 | 3D可视化工具HOOPS助力SolidWorks edrawings成功引入AR/VR技术

案例 | 3D可视化工具HOOPS助力SolidWorks edrawings成功引入AR/VR技术

HOOPS中文网慧都科技是HOOPS全套产品中国地区指定授权经销商&#xff0c;提供3D软件开发工具HOOPS售卖、试用、中文试用指导服务、中文技术支持。http://techsoft3d.evget.com/达索系统SolidWorks面临的挑战 达索系统SolidWorks公司开发和销售三维CAD设计软件、分析软件和产品…
阅读更多...
关于阿里云 ACK ingress部分补充

关于阿里云 ACK ingress部分补充

强调&#xff1a; 本文只是作为记录,过一段时间会删除 跟唐老师学习网络 一 Nginx Ingress管理 ① 流量走向 需求&#xff1a; 应用绑定LoadBalance,会自动创建或使用SLBeip:port --> nodeport_ip:port --> service_ip:port --> pod_ip:port 支持的注解 通过…
阅读更多...
程序员找副业有哪几个方向（纯干货）

程序员找副业有哪几个方向（纯干货）

前序 关于副业对于我自己的看法一般会先从自身的职业去拓展&#xff0c;毕竟自己所在的行业自己会更清楚有哪些资源去获取&#xff0c;那么首先我们可以先问万能的gpt我们程序员做副业有哪些实用的推荐&#xff0c;看看它怎么说的 外包网站接单&#xff1f; 每次大家提到程序…
阅读更多...
有效降低数据库存储成本方案与实践 | 京东云技术团队

有效降低数据库存储成本方案与实践 | 京东云技术团队

背景 随着平台的不断壮大&#xff0c;业务的不断发展&#xff0c;后端系统的数据量、存储所使用的硬件成本也逐年递增。从发展的眼光看&#xff0c;业务与系统要想健康的发展&#xff0c;成本增加的问题必须重视起来。目前业界普遍认同开源节流大方向&#xff0c;很多企业部门…
阅读更多...
Python之Django框架

Python之Django框架

目录 一、Web应用 1、什么是Web应用程序 2、什么是Web框架 ​二、手写Web框架 三、Python主流的web框架 四、Django框架版本及下载 五、注意事项 六、基本使用 1、验证是否下载成功 2、常用操作命令 (1)创建django项目 (2)启动django项目 (3)创建应用 七、主要文…
阅读更多...
腾讯云3年云服务器价格及购买教程

腾讯云3年云服务器价格及购买教程

腾讯云作为国内领先的云计算服务提供商&#xff0c;提供了多种优惠的云服务器套餐&#xff0c;以满足不同用户的需求&#xff0c;本文将详细介绍腾讯云3年云服务器价格及购买教程&#xff0c;新老用户均可购买&#xff01; 1、活动页面&#xff1a;传送门>>> 2、进入…
阅读更多...
CentOS7 安装Jenkins 2.414.3 详细教程

CentOS7 安装Jenkins 2.414.3 详细教程

目录 1、前提条件硬件软件-java11安装 2、安装jenkins3、启动jenkins配置用户和用户组配置JAVA_HOME 4、配置Jenkins一直处于启动状态5、测试Jenkins是否可以访问以及配置6、访问Jenkins系统 1、前提条件 硬件 内存 4G ; 硬盘 20G 软件-java11安装 上传文件jdk-11.0.21_lin…
阅读更多...
phono3py快速安装教程

phono3py快速安装教程

phono3py是类似于Phonopy的另一款基于第一性原理计算获得材料声学性质并可后处理的功能强大的软件&#xff0c;在以往推送内容中也有介绍基于phono3py 计算晶格热导率VASPphono3py:快速计算晶格热导率 和声子寿命理论到实践&#xff1a;VASPPhono3py计算Phonon Lifetime 以及…
阅读更多...
在Gradio实现分栏、分页的效果（二）

在Gradio实现分栏、分页的效果（二）

继续【Gradio的重要函数以及一些代码示例学习&#xff08;一&#xff09;】 1 fastapigradio的联合使用&#xff1a;mount_gradio_app 1.1 mount_gradio_app一个页面两个模块 分页的效果实现&#xff0c;主要依靠mount_gradio_app&#xff0c;启发于&#xff1a;Support mult…
阅读更多...
edge浏览器无法进入中国知网，但可以进入其他网站需要怎么解决

edge浏览器无法进入中国知网，但可以进入其他网站需要怎么解决

最近使用edge浏览器进入中国知网&#xff0c;加载了很长时间都打不开&#xff0c;好不容易打开了&#xff0c;结果出现&#xff1a;“嗯...无法访问此页面”。即使无法进入知网&#xff0c;但可以进入哔哩哔哩或其他网站&#xff0c;甚是苦恼&#xff0c;下面是一个方法&#x…
阅读更多...
谷歌护眼插件Dark Reader下载安装使用

谷歌护眼插件Dark Reader下载安装使用

网盘下载地址 链接&#xff1a;https://pan.baidu.com/s/1S086F-9aogPT1NJ2NoUqdw 提取码&#xff1a;ii29使用 前提&#xff1a;只对于谷歌用户&#xff1a; 1、下载后解压获得&#xff1a;Dark Reader v4.9.65.0.crx 2、然后把后缀改成.zip 3、再次解压出文件 4、然后把里…
阅读更多...
在Spring Boot中使用MyBatis访问数据库

在Spring Boot中使用MyBatis访问数据库

MyBatis&#xff0c;这个对各位使用Java开发的开发者来说还是蛮重要的&#xff0c;我相信诸位在企业开发项目的时候&#xff0c;大多数采用的是Mybatis。使用MyBatis帮助我们解决各种问题&#xff0c;实际上这篇文章&#xff0c;基本上默认为可以跳过的一篇&#xff0c;但是为了…
阅读更多...
修改Launcher3 图标为圆角

修改Launcher3 图标为圆角

packages\apps\Launcher3\res\xml\folder_shapes.xml packages\apps\Launcher3\src\com\android\launcher3\graphics\IconShape.java 上述文件的解析在 IconShape中 private static List<IconShape> getAllShapes(Context context) {ArrayList<IconShape> resul…
阅读更多...
13.求面积[有问题]

13.求面积[有问题]

#include<stdio.h> #include<math.h> #include<bits/stdc.h> using namespace std;void fun(double a,b,c) {double p,c;p (abc)/2;c sqrt(p*(p-a)*(p-b)*(p-c));printf("面积是&#xff1a;%lf",c); }int main(){double a,b,c;scanf("%lf,%…
阅读更多...
OOM排查

OOM排查

OOM排查 一&#xff0c;原因 1.一次性申请对象太多&#xff0c;创建了大量对象&#xff0c;尤其从表中读取了大量数据&#xff0c;循环中大量创建对象&#xff0c;放入list中。方案&#xff1a;限量 2.内存资源耗尽为释放&#xff0c;如connction&#xff0c;线程。方案&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023