VUE文件的创建

最新推荐文章于 2024-07-21 20:17:06 发布
最新推荐文章于 2024-07-21 20:17:06 发布
阅读量1.2k 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/654531
版权

第一步创建完VUE 项目之后 可以根据自己的需求 创建自己的文件目录（下图是我的文件目录，当然每个人的创建目录的风格也是不同的所以不做严格的规范）


img_06cd3b053218aa0c4f744f598be2da4c.png
img_dc986cd8fac82f206e283fbf3c51e525.png
模块文生成    components文件夹下创建  模块文件名字.vue的文件
img_385511c2999eafcae52b2fa8ce480891.png
创建页面        modules文件夹下创建文件夹index.vue
img_1c6306e25ec0efd9dc1a9f41b4f5165c.png
页面文件路由添加    页面文件下添加路由文件  indexRouter.js


img_06cd3b053218aa0c4f744f598be2da4c.png
img_db9b0af15fa8a33a14a1962553d06884.png
总路由中添加   


img_bf2abc818d9c5ad92cf2491f96e1e004.png
img_2c69f6593c3b670ceb3d97483d9dc5e3.png










weixin_34184158
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue新建文件夹.zip
03-26
@vue/cli 4.2.3  vue 使用vue-layer弹出框，axions，elmentui的表格等等的使用
vue-browser-sfc:Vue CLI模板，用于从.vue文件创建独立组件以在浏览器中使用
05-02
用于将单个文件组件（.vue）编译为独立JS文件以在浏览器中使用的构建设置的模板 该模板对于将VueJS单个文件组件（SFC）编译为独立的JS文件以在浏览器中使用非常有用。 这对于希望创建一个可以在网站上使用而无需...
vue快速创建文件夹指令
weixin_58414196的博客
10-01 715
【代码】vue快速创建文件夹指令。
前端vue框架的项目文件创建及常见Vue指令运用
最新发布
qq_43521551的博客
07-21 812
本文介绍前端Vue框架，先从npm工具创建的Vue项目开始，对Vue项目结构的一些文件用途进行说明，随后对Vue文件编写所用的两种风格（选项式API和组合式API风格）做了区分，同时对编写代码中常见的生命周期钩子函数做了一些概述，最后对Vue常见的内置指令包括内容渲染、条件渲染、列表渲染、属性绑定、表单绑定以及DOM的节点引用进行了详细介绍
vue的简单创建使用
qq_53524948的博客
02-23 1199
vue的简单创建使用
Vue创建
w504007124的博客
05-09 1070
1.在你需要创建vue项目的地方，按住shift键，点击右键 选择这个打开终端 2. 输入命令 vue create vue-test001 3.选择这个 4. 大概选择这些就差不多了，按空格，前面有个*就是选择，按上下箭头移动，，选择完毕之后，按回车键，进入下一步 5. 这里我选择2.x，主要我项目用的也是2.x 6. 下一个界面，我就是一直回车，然后就在加载 7.打开项目，打开package.json，修改一下serve为dev，保存 8.输入命令 npm ...
创建一个Vue
Erictezx的博客
10-21 266
Vue 帮我省去了建立webpack包 的大部分时间,相当于是一个快速开发工具等. Vue优势 总结: 花更少的时间,干更多的或.加快开发网的站速度. 不说了 上步骤了. 1.安装 Vue /cli 安装 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程 全局安装命令 yarn global add @vue/cli 或者 npm install -g @vue/cli 打开终端 注意: 如果半天...
autocreatevuefilebyshell通过命令行自动创建vue文件
08-12
本话题将深入探讨如何使用Shell脚本自动化创建Vue文件，提高开发效率。 首先，让我们理解Vue文件（*.vue）的作用。Vue文件是Vue.js项目中的组件单元，包含了模板（template）、脚本（script）和样式（style）三部分...
vue3-electron:使用Vue 3和Electronic创建文件资源管理器
05-26
在本项目中，`vue3-electron-main`可能包含了主进程的代码，负责初始化Electron应用、创建渲染进程、处理文件系统的操作，以及与Vue 3应用的渲染进程通信。开发者应根据`yarn serve`、`yarn build`、`yarn lint`等...
vue文件管理系统仿百度网盘
11-13
【Vue文件管理系统仿百度网盘】是一个基于Vue.js框架和Element UI组件库开发的应用，旨在模仿百度网盘的文件管理功能。此项目的核心是实现文件的层级展示与下钻操作，以及提供文件的预览和下载功能。让我们深入探讨...
让IntelliJ IDEA支持.vue文件的方法
08-27
这样就可以通过new选项创建.vue文件了。 使用Vue文件 现在，IntelliJ IDEA已经支持.vue文件了。可以创建新的.vue文件，并编辑其内容。IntelliJ IDEA将提供语法高亮、代码补全、代码检查等功能，提高开发效率。 小...
.vue文件_VSCode新建vue文件自定义模版
weixin_39884832的博客
11-25 278
在一个Vue的项目中，反复的新建.vue文件是一个必不可少的工序。本着科技让人偷懒的原则，我们可以利用VSCode的snippet在.vue文件创建后能轻松地生成一套模板。具体步骤如下1、选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框，输入vue选vue后，编辑器会自动打开一个名字为vue.json的文件2、复制以下内容到这个文件中：{ // P...
vue---从0开始，1.文件的创建
qq_40504108的博客
01-26 232
1.创建My-vue文件夹目录如下： 一开始，通过 npm init 指令，自动生成一个 package.json 文件； 通过npm install 指令来完成node_modules文件夹的创建 2.打开页面 在My-vue文件夹下按住shift键点击鼠标右键打开命令窗口，输入指令npm run dev运行： Project is running at http://127.0.0.1...
VUE项目创建及各文件的作用
云祈的博客
03-07 1146
vue init webpack jingdong _______________________ //创新项目位置 ? Project name jingdong ________________________//项目名字 ? Project description (A Vue.js pro...
（一）vue项目的创建和目录结构——总结版
weixin_51609337的博客
10-18 391
首先要有Node.js环境。1.安装vue2.命令行工具（CLI）为单页面应用快速搭建繁杂的脚手架。
怎么产生vue文件_VUE 初识
weixin_33901087的博客
02-04 122
两个版本对应的文件名template 和 render 怎么用如何用 http://codesandbox.io 写 Vue 代码两个版本对应的文件名vue.js(完整版)：有compiler（编译器，占体积较大，40%左右）；视图写在html里或者写在template选项；cdn引入vue.js；webpack引入需要配置alias；@vue/li引入需要额外配置；vue.runtime.js(...
构建过vue,如何再次创建新vue文件？
bx的博客
10-26 661
原帖：https://www.jianshu.com/p/88539f5a707b 1.打开命令行工具，查看个版本 node -v npm -v npm install -g npm将npm更新到最新版本 vue --version 2.cd 到要创建vue的文件夹 npm install -g@vue/cli-init 出错改成cnpm install -g @vue/cli-init 3.创...
【Vue】如何创建Vue项目
gardenia的博客
06-30 2085
下载地址：http://nodejs.cn/ 下载完成后，执行安装程序，直接进行安装即可 安装完成后，打开命令窗(cmd) 输入 node -v 和 npm -v 可查看安装的 node.js 和 npm 的版本号vscode：下载地址：https://code.visualstudio.com/● 缺使用 npm 进行安装 缺点：安装速度慢，因为资源在国外，可以使用国内镜像 ● 使用国内镜像资源安装 i. 首先切换淘宝镜像 ii. 安装Vue 使用 npm 安装 vue 的脚手架 4. 创建Vue项目 4
创建Vue详细步骤（巨详细）
Jjavaer的博客
07-03 2414
1.安装Vue（简略叙述） 1.官网自行下载node.js 2.安装完成后进入cmd ， 输入node -v检查版本； 输入npm -v检查NMP版本号； 3.切换淘宝NPM库 1).npm install -g cnpm --registry=https://registry.npm.taobao.org 方式2: 2).npm config set registry https://registry.npm.taobao.org (建议使用第二种) 4.检查镜像配置是否生效 npm co..
vue ui创建文件
09-01
要使用Vue CLI UI创建文件，你可以按照以下步骤操作： 1. 确保你已经在电脑上安装了Vue CLI。如果没有安装，你可以通过命令行运行以下命令进行安装： ``` npm install -g @vue/cli ``` 2. 打开命令行，并运行以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值