VueCLI脚手架创建项目（组件化开发）

最新推荐文章于 2023-05-24 20:44:30 发布
最新推荐文章于 2023-05-24 20:44:30 发布
阅读量273 收藏 1
点赞数
分类专栏： Web HTML\CSS JSCRIPT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013934107/article/details/113109261
版权
Web 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
HTML\CSS
3 篇文章 0 订阅
订阅专栏
JSCRIPT
1 篇文章 0 订阅
订阅专栏
  1. 创建vue项目

2.下载环境

3.删除componets\HelloWorld.vue样版文件

4.Components目录中创建三个vue文件（Index.vue、List.vue、Login.vue）：

5.创建router文件夹，创建index.js（路由配置文件）文件

6.配置router\index.js路由文件

7.修订src\App.vue文件

8.修订src\main.js文件

  1. copy dist目录并通过iis发布

注：如果发布后不显示内容，可重新编译

 

漂泊_人生
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue组件开发脚手架
12-04
generator-vue-component可以快速生成自己的组件开发的脚手架，类似于vue-cli生成vue项目，这脚手架是目录结构是方便组件开发和调试 由于脚手架是由yeoman搭建，所以必须全局安装yeoman npm install yo 然后全局安装generator-vue-component npm install generator-vue-component -g 到项目目录，获取对应的开发模板 yo vue-component-developer 运行上面命令会弹出下面，依次输入对应的信息，到Your component type这一步可以选择对应的组件类型，
Vue项目组件化工程开发实践方案
11-27
我们暂时给提取出来的脚手架取名叫vde-cli，通过vde-cli脚手架生成的组件库工程目录结构如下：   核心功能 组件库 工程的packages文件夹就是用来存放组件库里面的各种组件了，这里不需要通过手动创建文件的方式创建组件，直接通过一条创建组件的命令完成。每个组件都有一个单独的组件文件夹，组件文件夹下都至少包含”index.vue”，”example.vue”，”readme.md”这三个文件，这几个文件都是通过创建组件传递的参数加指定的模板生成，创建组件的命令如下： npm run generate <componentName> <componentTitle> 两个参数分别是组件
了解vue，脚手架、组件化开发
贵凰
10-09 304
1、Vue 基于 JS 的前端框架 基于MVVM 架构模式实现了数据自动双向绑定，从而替代了DOM 操作 提到架构模式 就必须提一下 观察者模式 / 发布-订阅模式 推荐组件化开发 脚本形式-不是很规范，工程化 CLI-比较规范 框架：繁琐操作自动化，通用流程规范化 2、组件 预定义的、可复用的功能单元 HTML 自定义标签，基于虚拟 DOM实现的 自定义颗粒度 Bootstrap 是一个前端组件库，HTML & CSS Vue 组件：模板、脚本、样式 3、Vue CLI - Com
vue组件开发脚手架（vue-sfc-rollup），开发组件并发布至npm的利器
weixin_34244102的博客
05-23 1204
全局安装依赖 npm install -g vue-sfc-rollup sfc-init OR use via npx 复制代码临时使用 npx vue-sfc-rollup Then... 复制代码Fill in prompts 进入项目文件夹 cd path/to/my-component-or-lib 复制代码启动运行项目 # - If single component vue s...
Vue 脚手架 之 组件的创建与使用
qq_45902025的博客
05-24 245
Vue 脚手架 之 组件的创建与使用
vue-cli3.0 脚手架搭建项目的过程详解
10-17
Vue CLI 3.0 是 Vue.js 官方提供的一个强大脚手架工具，它简化了 Vue.js 项目的初始化和构建过程。本篇文章将详细介绍如何使用 Vue CLI 3.0 来搭建一个新的 Vue 项目。 首先，你需要确保已经安装了 Node.js 和 npm...
使用 Vue cli 3.0 构建自定义组件库的方法
10-17
1. 安装和创建项目。 2. 添加必要依赖。 3. 修改工作目录结构和配置文件。 4. 添加编译脚本。 5. 创建自动化组件和文档生成脚本。 这个过程不仅可以用于创建 UI 库，也可以扩展到其他类型的组件库，例如图表库或...
在vue-cli创建的项目中使用sass操作
10-14
在Vue.js开发中，Vue CLI（Vue脚手架）是一个非常强大的工具，它可以帮助开发者快速构建项目并自动化很多配置工作。Vue CLI支持多种预处理器，包括Sass，这是一个广泛使用的CSS扩展语言，提供了变量、嵌套规则、混合...
详解使用vue-cli脚手架初始化Vue项目下的项目结构
08-27
详解使用vue-cli脚手架初始化Vue项目下的项目结构 在本文中，我们将详细介绍使用vue-cli脚手架初始化Vue项目下的项目结构。vue-cli是Vue提供的一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用...
webpack+vue.js构建前端工程化的详细教程
11-20
本篇主要介绍三块知识点： node.js ,vue.js,webpack前端工程化 ，希望对您能有所帮助。 本文来自于csdn,由火龙果软件Alice编辑推荐。 node.js基本入门 node.js介绍 node.js可以让javascript程序在后端运行起来。我们之前所熟知的javascript都是运行在前端浏览器，我们编写好了javascript代码后，由浏览器解释执行。而node.js，可以让我们编写javascript，然后在后端运行起来。现在的javascript和java、python一样，可以操作I/O、操作数据库、或者其他各类操作系统资源。 上面这张图，和下面的这张图很像
Vue项目总结之webpack常规打包优化方案
11-30
由于新建项目发版打包时间大概需要 30分钟 ，发版时 严重 拖慢 下班 时间，所以特意查看了相关文档来优化打包速度，争取早点下班，^_^。 分析打包文件 要优化，先分析。我们先要知道到底是哪里拖慢我们的打包速度呢？ 打包后生成文件分析 可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件 安装 npm i webpack-bundle-analyzer -D 使用 修改 webpack.prod.conf.js 文件 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').Bu
一个VuejsWebpack的组件化开发环境脚手架
08-14
一个Vue.js Webpack的组件化开发环境（脚手架）。
VUE：搭建脚手架——单文件组件
weixin_41350225的博客
04-17 482
配置入口entry1. vue单文件组件写法①什么是vue单文件组件写法②为什么要使用vue单文件组件写法③单文件写法示例2. 在webpack中使用vue单文件组件①安装nodejs , 搭建nodejs环境②用node自带npm安装yarn③创建项目目录(以英文命名)④在根目录(my-project)下创建package.json文件⑤用yarn全局安装webpack⑥在项目根目录(vuewe...
Vue项目组件化工程实践方案
weixin_33860722的博客
01-09 297
前言：随着前端模块化、组件化的概念深入，很多团队都开始开发自己的UI组件库，但是在开发和使用过程中难免会出现各种各样的问题，比如文档缺失，创建组件需要各种手工操作，写个组件例子还得去实际应用模块里去检查组件是否Ok等等，于是我们团队结合自己项目的应用提取了一个UI组件化工程的脚手架，可以非常方便的生成一个UI组件库的工程，很多之前需要手工处理的问题都交给脚手架自动完成。 UI组件库目录结构 我...
新建Vue脚手架并引入Vue组件库 Vant
hy3528的博客
12-02 1020
1.新建一个文件夹，点击目录并输入命令：cmd 2.新建脚手架 （1）输入命令：vue init webpack xx(创建项目) （2）前三项直接回车，第四行standalone，第五行yes，六-九NO(安装成功) 3.打开项目 （1）打开编辑器，打开文件夹，点击终端，新建终端 （2）输入命令：npm run dev 然后回车 （2）跑完后打开该链接即可在浏览器查看 <---...
使用vue-cli（vue脚手架）及其他组件搭建一个Vue项目
miracle33的博客
02-23 229
使用vue-cli（vue脚手架）及其他组件搭建一个Vue项目 vue是对新手很友好的MVVM框架，具有组件化和数据驱动。组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用；数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化（尤神原话），不必过多的关注DOM，只需要将数据组织好即可。vue-cli提供一个官方命令行工具，可用于快速搭建大型单页...
命令行创建vue脚手架、引入jq等插件、组件间传值
JHLIN的博客
01-20 824
创建vue脚手架： https://blog.csdn.net/Ag_wenbi/article/details/86359276 二、vue映入jquery 1、npm install jquery 2、在webpack.base.conf.js中添加 plugins:[ new webpack.ProvidePlugin({ $: "jquery", ...
windows下vue-cli及webpack 构建网站(三)使用组件
安树的博客
11-24 4124
1、本文章是建立在《windows下vue-cli及webpack 构建网站(一)环境安装》和《windows下vue-cli及webpack 构建网站(一)导入bootstrap样式》两篇文章之上的。 2、在src\components文件夹下面新建两个组件，分别为 header.vue、footer.vue，打开header.vue文件粘贴下面的代码作为网站的头部。
vue脚手架组件化开发
最新发布
09-13
在Vue.js中，可以使用脚手架来支持组件化开发。脚手架是一个用于快速生成项目结构和代码的工具。引用中提到的vde-cli脚手架就是一个例子。...总结起来，组件化开发是通过脚手架工具来创建项目结构，

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值