如何搭建一个vue项目(完整步骤)

搭建一个新的vue项目

  • 一、安装node环境
  • 二、搭建vue项目环境
    • 1、全局安装vue-cli
    • 2、进入你的项目目录,创建一个基于 webpack 模板的新项目
    • 3、进入项目:cd vue-demo,安装依赖
    • 4、npm run dev,启动项目
  • 三、vue项目目录讲解
  • 四、开始我们的第一个vue项目
    • 1、封装新组件
    • 2、讲讲父子组件
    • 3、使用路由搭建单页应用
    • 4、如何用less写样式
  • 五、补充
    • 1、解决vue启动后不自动访问浏览器的问题
    • 2、解决端口冲突

一、安装node环境

1、下载地址为:https://nodejs.org/en/

2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功

node -v

npm -v

在这里插入图片描述

3、为了提高我们的效率,可以使用淘宝的镜像:http://registry.npmmirror.com

输入:npm install -g cnpm –registry=http://registry.npmmirror.com,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

npm install -g cnpm –registry=http://registry.npmmirror.com

在这里插入图片描述

检查是否安装成功:

cnpm -v

在这里插入图片描述

二、搭建vue项目环境

1、全局安装vue-cli

npm install --global @vue-cli 是 vue 3.x及更高版本的 手脚架
npm install --global vue-cli 是 vue 2.x 的 手脚架(此文使用这个)
ps: 命令中的–global 可以更改成为–g

npm install --global vue-cli

在这里插入图片描述

2、进入你的项目目录,创建一个基于 webpack 模板的新项目

在这里插入图片描述

说明

Vue build                                    ==>        打包方式,回车即可;
 
Install vue-router                        ==>        是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;
 
Use ESLint to lint your code       ==>        是否需要 js 语法检测 目前我们不需要 所以 n 回车;
 
Set up unit tests                          ==>       是否安装 单元测试工具 目前我们不需要 所以 n 回车;
 
Setup e2e tests with Nightwatch ==>       是否需要 端到端测试工具 目前我们不需要 所以 n 回车;

3、进入项目:cd vue-demo,安装依赖

在这里插入图片描述

安装成功后,项目文件夹中会多出一个目录: node_modules
在这里插入图片描述

4、npm run dev,启动项目

npm run dev

项目启动成功:

在这里插入图片描述

在这里插入图片描述

三、vue项目目录讲解

在这里插入图片描述

1、build:构建脚本目录

	1)build.js               ==>  生产环境构建脚本;2)check-versions.js      ==>  检查npm,node.js版本;3)utils.js               ==>  构建相关工具方法;4)vue-loader.conf.js     ==>  配置了css加载器以及编译css之后自动添加前缀;5)webpack.base.conf.js   ==>  webpack基本配置;6)webpack.dev.conf.js    ==>  webpack开发环境配置;7)webpack.prod.conf.js   ==>  webpack生产环境配置;

2、config:项目配置

	1)dev.env.js   ==>  开发环境变量;2)index.js     ==>  项目配置文件;3)prod.env.js  ==>  生产环境变量;

3、node_modules:npm 加载的项目依赖模块

4、src:开发目录

src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

	1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;2)components:组件目录,我们写的组件就放在这个目录里面;3)router:前端路由,我们需要配置的路由路径写在index.js里面;4)App.vue:根组件;5)main.js:入口js文件;

5、static
  static:静态资源目录,如图片、字体等。不会被webpack构建

6、index.html
  index.html:首页入口文件,可以添加一些 meta 信息等

7、package.json
  package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息

8、README.md
  README.md:项目的说明文档,markdown 格式

9、.xxxx文件
  .xxxx文件:这些是一些配置文件,包括语法配置,git配置等

四、开始我们的第一个vue项目

1、封装新组件

在components目录下新建一个views目录,里面写我们的vue组件

1)开始我们的第一个组件:

a:在views目录下新建First.vue
b:在router目录下的index.js里面配置路由路径

在这里插入图片描述

c:template 写 html,script写 js,style写样式

在这里插入图片描述

d:输入ip: http://localhost:8010/#/first,查看页面效果

在这里插入图片描述

注意
一个组件下只能有一个并列的 div,以下写法是错误:

在这里插入图片描述

数据要写在 return 里面,而不是像文档那样子写,以下写法错误:

在这里插入图片描述

2、讲讲父子组件

1)在components目录下新建sub文件夹,用于存放一下可以复用的子组件。比如新建一个Confirm.vue组件

在这里插入图片描述

3)在父组件中引入子组件

引入:import Confirm from ‘…/sub/Confirm’

注册:在<script></script>标签内的 name代码块后面加上 components: {Confirm}

使用:在<template></template>内加上<confirm></confirm>

完整代码:

在这里插入图片描述

2)父子组件通信

子组件:

在这里插入图片描述

父组件:

在这里插入图片描述

3、使用路由搭建单页应用

1)按照以上方法,新建一个Second.vue组件

2)路由跳转:<router-link to=“/second”>去第二个页面<router-link>
    
在这里插入图片描述

在这里插入图片描述

路由跳转之后,注意观察路径变化:

在这里插入图片描述

可以看到,在html中解析成了a标签
在这里插入图片描述

这里只是简单的介绍了一下路由的使用,更多详细信息,请前往官网学习:https://router.vuejs.org/zh/

4、如何用less写样式

1)安装less依赖:npm install less less-loader --save
错误如下
在这里插入图片描述
原因:
这是less-loader的12.2.0版本和node.js版本不兼容,要求大于18.12.0或者降低less-loader版本

解决:(与自己安装的版本兼容)
使用这个可以npm install less less-loader@4.1.0 --save

npm install less less-loader@4.1.0 --save

在这里插入图片描述

安装成功之后,可在package.json中看到,多增加了2个模块:

在这里插入图片描述

2)编写less

在这里插入图片描述

五、补充

1、解决vue启动后不自动访问浏览器的问题

解决vue启动后不自动访问浏览器的问题:当我们输入npm run dev,运行项目,命令行提示我们运行成功,但是浏览器也没有自动打开,只能自己手动输入。

解决:

1)打开config  ==> index.js

在这里插入图片描述

2)module.exports配置中找到autoOpenBrowser,默认设置的是false

在这里插入图片描述

3)将autoOpenBrowser改为true

在这里插入图片描述

4)Ctrl+C,然后我们重启一下,就能自动打开浏览器了

在这里插入图片描述

2、解决端口冲突

为了避免端口冲突,也可以修改port,打开目录同上

在这里插入图片描述

修改成功:

在这里插入图片描述

end


参考:https://www.cnblogs.com/yanxulan/p/8978732.html
最后附上demo地址:https://github.com/yanxulan/vue-demo.git


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go 爬虫之 colly 简单示例

1. 背景 colly 是 Go 实现的比较有名的一款爬虫框架&#xff0c;而且 Go 在高并发和分布式场景的优势也正是爬虫技术所需要的。它的主要特点是轻量、快速&#xff0c;设计非常优雅&#xff0c;并且分布式的支持也非常简单&#xff0c;易于扩展。 2. 官方文档 https://go-col…

RPC原理技术

RPC原理技术 背景介绍起源组件实现工作原理 背景 本文内容大多基于网上其他参考文章及资料整理后所得&#xff0c;并非原创&#xff0c;目的是为了需要时方便查看。 介绍 RPC&#xff0c;Remote Procedure Call&#xff0c;远程过程调用&#xff0c;允许像调用本地方法一样调…

Java 如何使用aws的kinesis实现消费端,消费流中数据

1.前言 AWS 官网给了两种方式实现: java 1.x java 2.x 这两种方式,包是不一样的,1.x是com.amazonaws,2是software.amazon.kinesis 使用也是天差地别,而且国内对kinesis这个资料简直少的可怜,这也就增加了开发难度, 2.什么是kinesis 我说一下kinesis是啥吧,其实和咱们队…

spring jpa 公共字段设计

数据库公共字段 1、多租户 tenantId 2、创建者名字 createName 3、创建者时间 createTime 4、更新者名字 updateName 5、更新者时间 updateTime 基础model类 /*** 基础Model*/ Data MappedSuperclass public class BaseModel implements Serializable{IdGeneratedValue(stra…

Linux DAY 6 _systemctl

systemctl命令&#xff0c;通过这个命令控制系统操作 语法&#xff1a;systemctl start | stop | status | enable | disable 服务名 start 启动 stop 关闭 status 查看状态 enable 开启开机自启 disable 关闭开机自启 服务名&#xff1a; NetworkManager 主网络服务 net…

源网络地址转换SNAT

左上角的是访问互联网发送的数据包&#xff0c;第一个是访问&#xff0c;第二个是网页传回来的 3、4项是源端口号和目的端口号&#xff08;3是随机的&#xff08;1024-65535&#xff09;&#xff0c;那个是http的网页服务端口就是80&#xff09; 那么往回传数据的时候源和目的…

解决uniapp中的web-view页面进入时全屏问题

当我们在使用uniapp开发应用的时候&#xff0c;我们使用web-view进行外部页面的引入 在h5 浏览器下显示正常&#xff0c;我通过样式控制&#xff0c;上面是web-view&#xff0c;下面是菜单栏。 但是在 app调试或真机上&#xff0c;无论如何&#xff0c;web-view都占满全屏&…

0.零基础入门微服务实战课

0.零基础入门微服务实战课 1.微服务和 Spring Cloud1.1 什么是微服务&#xff1f;1.2 什么是 Spring Cloud&#xff1f;1.3 微服务 VS Spring Cloud 2.为什么要学微服务&#xff1f;3.Spring Cloud 组件介绍 1.微服务和 Spring Cloud 1.1 什么是微服务&#xff1f; 微服务是将…

【Leetcode 每日一题】28. 找出字符串中第一个匹配项的下标

给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示例 1&#xff1a; 输入&#xff1a;haystack &qu…

DFE_offset失调校准

1.校准原因 *制造工艺的限制&#xff1a;晶体管在制造过程中&#xff0c;由于工艺的限制&#xff0c;不可能做到完全对称&#xff0c;这导致了输入级晶体管的性能存在微小的差异。 *输入级偏置电流的不对称&#xff1a;输入级晶体管的偏置电流也会存在差异&#xff0c;这也会…

H4vdo 台湾APT-27视频投放工具

地址:https://github.com/MartinxMax/H4vdo 视频 关于 H4vdo RTMP lock 屏播放视频工具&#xff0c;可以向目标发送有效载荷&#xff0c;播放目标的屏幕内容。目标无法曹作计算机 使用方法 安装依赖 根据你的操作系统选择一个安装程序 RTMP 服务端 ./rtsp-simple-server.…

npm run dev启动element-ui,提示node_modules中webpack的版本跟package.json中webpack的版本不一致

问题一&#xff1a;修改node_modules/webpack/package.json版本为4.14.0&#xff0c;npm run dev时版本号又自动更改为 4.47.0 问题二&#xff1a;使用yarn 安装依赖&#xff0c;webpack的版本默认是4.47.0&#xff0c;为什么 求大佬们帮我解答一下以上两个问题 左侧是node_m…

【退役重学Java】关于 Sentinel 与服务熔断熔断

一、Sentinel 分布式系统的流量防卫兵 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。Sentinel 以流量为切入点&#xff0c;从流量控制、熔断降级、系统负载保护等多个维度 二、服务熔断 是什么&#xff1a; 服务熔断是一种微服务架构中的容错机制&#…

数据中心大型AI模型网络需求

数据中心大型AI模型网络需求 随着Transformer的崛起和2023年ChatGPT的大规模应用&#xff0c;业界逐渐形成共识&#xff1a;遵循一定的规模效应原则&#xff0c;增加模型参数量能够显著提升模型性能。特别是在参数数量级跃升至数百亿乃至更高时&#xff0c;大型AI模型在语言理…

【C++】 类型转换的详细讲解

前言 本章我们将学习C里面的几种类型转换。如&#xff1a; static_cast、reinterpret_cast、const_cast、dynamic_cast。 这些都是操作符关键字。 目录 1. C的类型转换1.1 C语言的类型转换&#xff1a;1.2 为什么C需要四种类型转换&#xff1a;1.3 C强制类型转换&#xff1a;1.…

知识分享|非凸问题求解方法及代码示例【分类迭代】【大M法】

主要内容 之前发布了非线性问题线性化的几种方法&#xff0c;如知识分享|分段函数线性化及matlab测试&#xff0c;学习园地 | yalmip实用操作-线性化&#xff0c;非线性优化 | 非线性问题matlabyalmip求解案例&#xff0c;但是在实际建模及编程过程中&#xff0c;会遇到各种…

记录一个更新adobe软件导致加载PDF文件异常的问题

最近由于项目需要,没有办法把原有的adobe正版软件进行了卸载,换了个盗版软件,结果导致我的pdf文件加载的时候出现异常。 报错的语句是这个 string str = System.Environment.CurrentDirectory; // string fileName = MyOpenFileDialog(); axAcroPDF1.LoadFile(…

一顿五元钱的午餐

在郑州喧嚣的城市一隅&#xff0c;藏着一段鲜为人知的真实的故事。 故事的主角是一位年过半百的父亲&#xff0c;一位平凡而又伟大的劳动者。岁月在他脸上刻下了深深的痕迹&#xff0c;但他眼神中闪烁着不屈与坚韧。 他今年52岁&#xff0c;为了给远在家乡的孩子们一个更好的…

人工智能应用-实验4-蚁群算法求解 TSP

文章目录 &#x1f9e1;&#x1f9e1;实验内容&#x1f9e1;&#x1f9e1;&#x1f9e1;&#x1f9e1;代码&#x1f9e1;&#x1f9e1;&#x1f9e1;&#x1f9e1;分析结果&#x1f9e1;&#x1f9e1;&#x1f9e1;&#x1f9e1;实验总结&#x1f9e1;&#x1f9e1; &#x1f9…

【vue】封装的天气展示卡片,在线获取天气信息

源码 <template><div class"sen_weather_wrapper"><div class"sen_top_box"><div class"sen_left_box"><div class"sen_top"><div class"sen_city">山东</div><qctc-time cl…