vue的目录结构、项目流程、vue-router

最新推荐文章于 2024-08-06 10:58:52 发布
最新推荐文章于 2024-08-06 10:58:52 发布
阅读量3.2k 收藏 4
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lina2017lina/article/details/81629965
版权
本文介绍了Vue项目的目录结构，从index.html开始，经过main.js、App.vue到router/index.js的运行流程。同时讲解了vue-router作为Vue的核心插件，如何实现组件与路由的映射，用于控制视图的渲染。
摘要由CSDN通过智能技术生成

****************************************

此时vue的脚手架、创建项目已经完成。

vue的目录结构

目录/文件 说明
build 最终发布的代码存放位置。构建脚本目录
config 配置目录，包括端口号等。我们初学可以使用默认的。项目配置。
node_modules npm 加载的项目依赖模块。感觉有点像java中的jar包。就是项目需要。
src

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

  • assets: 放置一些图片，如logo等。这里的资源会被wabpack构建。
  • commponents: 公共组件目录。
  • App.vue: 根组件，项目入口文件，我们也可以直接将组建写这里，而不使用 commponents 目录。
  • main.js: 项目的核心文件。
static 纯静态资源目录，如图片、字体等。不会被wabpack构建。
index.html 首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。入口页面
pac
最低0.47元/天 解锁文章
___KAKU
关注
专栏目录
vue项目详细搭建步骤
04-02
详细描述怎么搭建vue项目，nodejs安装，idea支持，以及vue打包部署
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
【vue】vue的目录结构、项目流程、vue-router
WANGHUAN-
03-13 190
vue项目常见目录
最新发布
m0_57836225的博客
08-06 429
│ │ │ └── logo.png # 项目的 logo 图片。│ │ └── index.js # Vuex 状态管理配置。│ │ └── Button.vue # 自定义按钮组件。│ │ └── index.js # 路由配置文件。│ │ └── http.js # 接口请求封装。│ │ └── main.css # 通用样式。│ │ └── HomeView.vue # 首页组件。
vue项目流程
二氧化硅.的博客
04-03 2052
项目流程 1.创建项目 （1）新建一个文件夹project（到时候创建的项目会放在这个文件夹里面） （2）打开文件夹，在空白处按住shift的同时点击鼠标右键，点击“在此处打开Powershell窗口(S)” （3）淘宝镜像（不是必须安装，速度可以快一点） 如果装了的话，后面命令中的npm全部要改成cnpm,此处我没有安装 npm install cnpm -g --registry=https://registry.npm.taobao.org （4）如果已经全局安装了旧版本的 vue-cli(1.x
vue开发项目流程
走在秃头的路上的博客
02-23 472
1.$ node -v (检测node版本，node版本需要在 V4 以上) 创建一个空目录 2.全局安装vue $ npm install -g vue 3.安装脚手架 $ npm install -g vue-cli 4.运行 vue 命令，看是否已安装完毕 $ vue / $ vue list (查看可安装的模板) 5.安装模板 $ vue init webpack(模板) sell(项目名...
【狂神说Java】vue学习笔记09----vue-router路由
pan_h1995的博客
06-22 1270
说明
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
vue-router 中router-view不能渲染的解决方法
08-30
在项目目录结构中，main.js 文件中 import 了 router，並在 new Vue 实例中传入了 router。但是，在渲染时，Router-View 始终不能显示内容。 解决方法： 解决该问题的关键在于，Vue Router 的 routes 配置。开发者...
Vue之项目大致流程
常蓬的博客
09-24 388
文章目录 1.创建项目:vue create 项目名 ,注意要在cmd中创建 2.创建项目后：按以下步骤进行配置，如图片顺序 然后等待创建项目：建议选择Vue2.0 构建的项目是通过脚手架来创建的，配置路由，配置其它的(如文件夹) 创建后的大致文件夹，都是配置好的 ...
VUE项目开发的完整流程
weixin_45928161的博客
03-11 2万+
文章目录一、VUE环境搭建二、创建VUE项目1. 外部终端创建2. IDea内部终端创建3. 项目介绍4. vue 的特别之处三、添加前端开发插件依赖四、前端开发流程1. 创建组件与编码2. 配置组件路由3. 运行五、前后端交互 提示：本文是VUE项目开发的流程梳理，是对本专栏博客的梳理 一、VUE环境搭建 搭建VUE环境，可参考vue环境搭建 下载使用yarn，可参考yarn的安装和使用 二、创建VUE项目 这里只介绍其中我所熟知的两种方式 1. 外部终端创建 在存储vue项目的目录，清除路径并输
Vue-Router源码分析系列：目录
hd101367816的博客
03-04 565
vue-router的注册
Vue项目步骤
niesiyuan000的博客
10-21 559
配置前最好先安装个淘宝镜像 npm install cnpm -g (mac环境下前面加sudo) 如何创建Vue项目 安装脚手架 cnpm install vue-cli -g隐藏的(mac环境下前面加sudo) 查看版本 vue -V 安装项目模板 vue init webpack cli cli:项目名称（不能用大写名字,不能用中文） 第一...
vue 新建项目流程
czp555的博客
05-09 598
1. 下载node,安装直接下一步操作就按装完成，在cmd命令行查看node -v版本和npm -v版本（node安装完成时就安装了npm）。2.输入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安装淘宝镜像安装相关依赖3.新建vue项目目录，（进入某盘符直接盘符加冒号，例如e: 进入e盘，进入新建vue项目目录,cd...
Vue CLI 4.5.7 脚手架项目的搭建、目录结构分析、Vue Router的基本使用
jonssonyan
10-17 1370
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。 官方文档地址：https://cli.vuejs.org/zh/guide/ 通过Webstorm npx方式新建一个Vue CLI脚手架项目 默认目录结构如图所示 打开命令行，使用npm ls --depth 0查看项目默认依赖 使用npm run se.
Vue创建项目步骤
热门推荐
cedricdx的博客
09-23 8万+
Vue框架使用vue简介MVVM的介绍vue项目步骤vue项目目录详解运行vue可以自动打开浏览器如何使用less写样式 vue简介 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 ...
学习记录(day08- vue-cli创建项目目录结构、Vue Router项目执行流程)
庭前云落的博客
10-25 99
[TOC] 使用 vue-cli脚手架创建项目目录结构 vue-cli脚手架 创建项目 //1 安装脚手架 npm install -g @Vue/cli //...
Vue.js项目中Vue-Router的组件化导航配置
1. **注册路由**: 在Vue.js项目中，首先需要安装Vue Router，然后在JavaScript文件中通过`VueRouter`构造函数创建一个新的路由器实例。例如，官方文档中提到的： ```javascript var routerObj = new VueRouter({ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值