Vue项目 一、准备以及初始项目解析

最新推荐文章于 2024-05-16 17:54:12 发布
最新推荐文章于 2024-05-16 17:54:12 发布
阅读量6.8k 收藏 8
点赞数 4
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mpdemp/article/details/70243611
版权

准备

–

技术栈

  • Html+css+javascript
  • webpack
  • ES6基本语法
  • Vue
  • vue-router 路由
  • axios 网络请求
  • Vuex 状态管理
  • scss css预编译

安装

1、安装vue
npm install vue -g
2、安装vue-cli脚手架
npm install --global vue-cli

项目初始化

1、初始项目

    使用vue-cli脚手架工具初始化一个vue项目:

vue init webpack my-object
cd my-boject
npm install
npm run dev

项目目录如图：

这里写图片描述

build  //最终发布的代码存放的位置
config   //配置目录，包括端口号等
node_modules  //npm加载的项目依赖模块
src  //这里是我们要开发的目录，基本上要做的事情都在这个目录里。
static  //静态资源目录，如图片、字体等。
package.json //项目配置文件，这个用于控制项目的依赖。使用npm加载依赖时，会按照这个文件里面描述的各个依赖模块的版本进行查找，先查找node_modules目录下是否已存在某个依赖，若不存在再去网络下载，但是不会查找本地缓存中已经下载好的。
index.html  //项目的入口
static/.gitkeep  //这个文件保证这个文件夹在上传到github的时候会始终存在。因为github本身会忽略掉空文件夹。
.babelrc  // babel语法编译器的编译配置
.editorconfig  //编辑器的配置
.eslintignore  //忽略语法检查的目录
.eslintrc.js  //eslint的配置文件
.gitignore   //一些不需要上传的文件或者目录
README.md   //项目的描述文件


我们最需要关注的，就是src里面的内容

这里写图片描述

asset  //放置一些图片
components  //组件目录，用于放置一些组件
router  //路由文件
App.vue  //项目入口文件，可以将组件都写在里面
main.js  //项目的核心文件

初始文件展示

//index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <
最低0.47元/天 解锁文章
「已注销」
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue初始化的空白项目
06-22
在这个“vue初始化的空白项目”中，我们可以看到几个关键文件和目录，它们构成了一个基础的Vue应用结构。让我们逐一解析每个文件和目录的作用： 1. `.gitignore`：这是一个Git版本控制系统使用的文件，它定义了在...
详解Vue项目引入CreateJS的方法（亲测可用）
12-08
1 前 言 1.1 CreateJS介绍   CreateJS是基于HTML5开发的一套模块化的库和工具。 基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。 A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS TweenJS SoundJS PreloadJS 1.2 CreateJS版
初始化创建Vue项目步骤
Tc、zyh的博客
06-10 8078
一、项目创建 1.安装 node和npm 1.首先安装node，因为都已经安装过node了，所以npm自带。 1.检查node版本 node -v 2.检查npm 版本 npm -v 2.国外的npm地址太慢，切换npm国内镜像 npm config set registry=https://registry.npm.taobao.org/ 3.查看地址是否成功可以通过npm config get registry npm config get registry 2.安装 vue-cli 脚手
如何搭建一个vue项目(完整步骤)
最新发布
y2020520的博客
05-16 3138
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；最后附上demo地址：https://github.com/yanxulan/vue-demo.git。参考：https://www.cnblogs.com/yanxulan/p/8978732.html。d：输入ip： http://localhost:8010/#/first，查看页面效果。
vue初始化（命令行方式）
C90283的博客
11-14 9171
VUE项目初始化步骤命令 1，安装Node.js; Window安装包 Mac安装包 检查是否安装成功 node -v 显示版本即成功，如图： 2，安装vue-cli脚手架； 打开命令行窗口cmd（window+R,输入cmd后Enter） 在cmd下执行命令 cnpm install vue-cli -g 安装成功如图 3，初始化项目文件夹； 在你准备建项目的文件夹打开cmd 执行命令 vue init webpack vue-project(注：vue-project是自定义项目名称) 如图： 初
vue中初始化
多看多听多总结
04-18 1830
全局api Created with Raphaël 2.3.0开始initGlobalAPIvue构造函数initMixinstateMixineventsMixinlifecycleMixinrenderMixin结束
vue初始化实例（从底层源码讲起）
weixin_59804331的博客
02-09 488
总结了Vue从初始化到递归创建元素的大致流程：定义Vue构造函数/全局API/实例的属性方法 -> new Vue() -> init() -> mountComponent -> render -> patch -> createElm-> createComponent -> createChildren -> insert，整理的流程概述图如下
vue3初始化项目 sass vite ts
08-01
Vue3初始化项目通常涉及到一系列配置和文件，包括前端框架Vue3、样式预处理器Sass以及TypeScript的集成。下面将详细解析这些知识点及其在实际项目中的应用。 **Vue3** Vue3是Vue.js的最新版本，它带来了许多性能...
Vue 项目构建与开发入门.zip
07-09
Vue.js 是一款非常流行的前端JavaScript框架，用于...通过学习这本“Vue 项目构建与开发入门”的小册，你将逐步掌握Vue的基础知识，包括项目初始化、组件化开发、状态管理和路由设置等，从而顺利地步入Vue开发的世界。
vue新建项目cmd命令详细解析.docx
12-16
本文将详细解析 Vue 新建项目的 cmd 命令，包括项目创建、Git 存储库初始化、插件安装、 npm 包管理等内容。 一、项目创建 使用 Vue CLI 创建新的 Vue 项目需要选择预设（preset），包括三个选项：.vue 2（babel, ...
vue项目添加多页面配置的步骤详解
10-16
在初始创建Vue项目时，通常只有一个默认的入口文件（如`src/main.js`），它对应的HTML模板是`public/index.html`。然而，随着项目发展，可能会有新的业务模块，这时就需要创建多个入口文件和对应的HTML模板，以实现...
vue2项目的初始化搭建流程
m0_67911008的博客
05-31 3207
文章旨在vue2项目的初始化搭建流程——包含vue-router，axios，vuex，element-ul配置。使用部分该文章vue2项目的初始化搭建流程是在node已经成功安装配置的条件下，不再展开赘述node的安装，环境配置。
在Vue中使用 createjs
Mystery2020的博客
10-13 984
在Vue中使用 createjs
【Vue2.0源码学习】生命周期篇-初始化阶段(new Vue)
一个前端开发者
08-14 633
在Vue中，每个Vue实例从被创建出来到最终被销毁都会经历一个过程，就像人一样，从出生到死亡。在这一过程里会发生许许多多的事，例如设置数据监听，编译模板，组件挂载等。在Vue中，把Vue实例从被创建出来到最终被销毁的这一过程称为Vue实例的生命周期，同时，在Vue实例生命周期的不同阶段Vue还提供了不同的钩子函数，以方便用户在不同的生命周期阶段做一些额外的事情。那么，接下来的几篇文章我们就从源码角度深入剖析一下一个Vue实例在从生到死的生命周期里到底都经历了些什么，每个阶段都做了哪些事情。
最前端｜详解VUE源码初始化流程以及响应式原理
在数字化道路无限探索
08-30 633
详细解读源码，干货别错过
vue组件初始化执行顺序
Anyuegogogo的博客
05-19 953
Props Watch 等顺序；结合父子组件之后，一个完整的父子组件生命周期
Vue项目介绍
紫月i的博客
10-06 6650
1.Vue项目结构： build文件夹：项目构建（webpack）相关代码 config文件夹：配置文件夹，配置目录，端口号等等 node_modules:npm依赖的项目模块 src文件夹：开发目录 src包括： App.vue文件：项目入口文件 main.js文件项目的核心文件 router文件夹：存放路由文件，里面的index.js存放路由 component文件夹：组件文件夹 static文件夹：静态资源文件夹 index.html文件：主页面文件 package.json：配置文件 2.vue单
vue 使用 createjs 绘制扇形
zzw_bei的博客
08-15 805
createjs 绘制扇形
若依框架vue项目解析
08-18
对于Vue项目的解析，可以按照以下步骤进行： 1. 首先，在Vue项目中，通常会使用Vue CLI来创建和管理项目。Vue CLI是一个官方提供的脚手架工具，可以帮助我们快速搭建Vue项目的基础结构。 2. 在Vue项目中，主要的文件是src目录下的文件。其中，main.js是项目的入口文件，它会初始化Vue实例，并将根组件挂载到HTML页面上的某个DOM元素上。 3. 在src目录下，通常会有一个components目录，用于存放项目中的各个组件。Vue的组件是可以复用的，我们可以将页面拆分成多个组件，并通过组件之间的嵌套和通信来构建整个页面。 4. 在Vue项目中，还有一个重要的概念是路由（router）。通过使用Vue Router插件，我们可以实现页面之间的跳转和路由参数的传递。 5. 另外，Vue项目中还会用到状态管理（state management），通常使用Vuex插件来实现。Vuex可以帮助我们统一管理应用程序的状态，并实现组件之间的数据共享。 6. 在开发过程中，我们可以使用Vue的模板语法来编写组件的模板部分，使用Vue的指令来处理动态数据和事件绑定。同时，也可以使用Vue的生命周期钩子函数来处理组件的初始化、销毁和更新等操作。 总之，Vue项目的解析主要包括项目结构的搭建、组件的定义和使用、路由的配置和使用、状态管理的实现等方面。此外，还有一些其他的特性和插件，如Vue的过滤器、混入（mixin）等，可以根据具体需求进行使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值