Vue——配置以及webpack模板工程

最新推荐文章于 2025-02-23 20:45:56 发布
最新推荐文章于 2025-02-23 20:45:56 发布
阅读量472 收藏 1
点赞数
分类专栏： VUE 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Zjaun/article/details/87257208
版权

Vue官网

https://cn.vuejs.org/

Vue菜鸟教程

http://www.runoob.com/vue2/vue-install.html

知乎上的

https://www.zhihu.com/question/38213423

配置

命令行安装

最新版本确认
$ npm show vue-cli
$ [sudo] npm install -g vue-cli@2.9.6
安装版本确认
$ vue -V
命令帮助
$ vue -h

初始化 模板名 工程名
$ vue init webpack my-project
初始化 自定义模板 工程名
$ vue init username/repo my-project

提供模板
在这里插入图片描述

模板官网
https://github.com/vuejs-templates

建立webpack模板工程

1.vue init webpack myweb
在这里插入图片描述
选择第一个动态编译器
在这里插入图片描述
安装路由
在这里插入图片描述
ES语法检测器
在这里插入图片描述

测试
在这里插入图片描述

e2e的测试

在这里插入图片描述
包管理器

$cd myweb
进入应用环境的目录

$npm run bulid dist是打包后的文件
在这里插入图片描述
打包操作 发布
在这里插入图片描述

要精确指定版本号

工程结构

webpack模板生成的工程结构

build webpack设置文件
config 工程设置文件
src 源文件夹
static 静态文件夹（编译时直接拷贝至发布文件夹）
index.html 网页启动入口文件

在这里插入图片描述

【重点突破】—— vue+webpack+axios初始化搭建项目框架（转）
柳柳66的博客
02-23 787
前言：这个教程从零开始一步一步说明搭建一个完整实用vue项目的所有流程，vue-cli + webpack + vue-router + ant-design-vue +axios。在原教程基础上完善了axios封装请求，UI组件库换用ant-design-vue，项目github地址。(教程转载自GQguoqi博客) 一、准备工作 在用Vue.js构建大型应用的时候推荐使用NPM安装方法，...
Vue实战指南：分解Vue项目大文件——Webpack打包方法
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-19 2118
在开发基于Vue.js的应用时，随着项目规模的扩大，单个文件的体积也会随之增长，特别是当涉及到大量的依赖库和复杂的业务逻辑时。本文将详细介绍如何使用Webpack来优化Vue项目的打包流程，包括代码分割、懒加载以及其他相关技术，以实现更高效的文件管理。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。代码分割是指将应用的代码拆分成多个较小的代码块(chunk)，使得只有在真正需要的时候才会加载这些代码块。一边打入敌人内部一边持续提升自己。
vue-webpack模板
01-08
vue 组件化 webpack 模板
第一个vue工程模板(基于B站狂神的Vue快速上手P12+)
优快云13822805069的博客
02-12 726
前情提要: 多看一眼 1.涉及有关的组件安装为了防止运行出错可以使用我@的版本 2.记得要安装了淘宝的镜像加速器(cnpm)组件才可以使用cnpm指令※※※※※※※※※※ 留心版本,我试过都用最新版,发现出现了一堆版本兼容问题.用我推荐的版本可以完美运行出来狂老师的vue工程小demo 1.Node.js@v12.13.0版本 下载地址:node.js官网 2.安装node.js淘宝镜像加速器(cnpm) npm install cnpm -g 3.vue-cli cnpm instal1 vue-cli
-VUE-
最新发布
hqHQLwe的博客
02-23 809
渐进式框架：Vue 是渐进式的，意味着你可以根据项目的需求逐步采用 Vue 的不同功能。你可以从一个简单的组件开始，逐渐引入路由、状态管理等功能，而不必一开始就采用整个 Vue 生态系统。这种灵活性使得 Vue 可以方便地集成到现有的项目中。响应式数据绑定：Vue 采用了响应式系统，当数据发生变化时，与之绑定的 DOM 元素会自动更新。通过简单的语法，开发者可以将数据绑定到 DOM 节点上，实现数据与视图的同步。组件化开发：Vue 鼓励使用组件化的方式来构建应用。
vue工程模板
05-05
vue空的工程模板，最近非常流行的开发技术，欢迎小伙伴们来下载，并使用
使用模板创建vue工程（Vue-cli@3.X）
qq_45482727的博客
05-09 217
基于vue-cli@3.X以上版本，根据已知vue模板创建工程，实现步骤特此记录 步骤如下： 新建放置模板的的文件夹 在命令行中，执行命令npm init，根据情况填写相关内容，生成模板的package.json文件 创建preset.json文件,例： { "packageManager": "yarn", "useTaobaoRegistry": true, "useConfigFiles": true, "vuex":true, "router":true, "router
webpack中vue模板组件的使用
weixin_43209953的博客
01-17 386
<template> <div> <h1 @click="show">我是登陆组件{{ message}}</h1> </div> </template> <style> </style> <script&gt
2023-03-21【总结：常见性能优化（二）】对于vue项目你有哪些常见的优化的方案?—— 在Webpack层面对Vue项目进行优化
GAARA
03-21 392
文章目录 二.在Webpack层面对Vue项目进行优化 1.使用webpack对图片进行压缩 vue项目中的图片处理 如何使用image-webpack-loader压缩图片? 2.减少ES6转成ES5的冗余代码 为什么会出现冗余代码? 解决冗余代码的方法 原理 插件 3.提取公共代码 为什么要提取公共代码? 配置插件 4.使用模板预编译 5.提取组件的CSS 6.优化SourceMap 打包后用于线上环境的代码出现bug时不好定位和调试 解决方法:sourceMap解决不好调试代码的问题 7.构建结果输出
手动搭建vue-cli环境，不使用webpack模板
m0_52673390的博客
02-15 1200
文章目录前言npm安装全局安装和本地安装的区别cnpm安装总结 前言     虽然学会了使用webpack模板进行安装vue-cli环境，但是有些情况下还是需要单独安装一些模块（组件），所以教程来了，准备好跟随我去探索了吗？ 如果不知道怎样使用webpack模板安装vue-cli环境，参考我另一篇博客:创建vue-cli2项目详解 npm安装     在安装之前首先创建一个新的文件夹，将即将创建的环境安装在当前文件夹中。 安
将vuecli2项目升级webpack4项目模板
08-09
这篇详细的知识点解析将指导你如何将基于 Vue CLI 2 的项目手动升级到使用 Webpack 4 的项目模板。 1. **Webpack 4 的主要变化**： - **性能提升**：Webpack 4 引入了更快的编译速度和更小的打包体积，这得益于对 ...
vue项目模板,npm i 后直接使用
12-13
vue项目的模板，已经配置好路由和热保存编译，可以直接使用run dev命令
webpack模板
02-15
Webpack简介 Webpack是任务运行程序和模块捆绑程序。 它最初是作为模块捆绑器开始的。 这意味着它将采用所有单独的Javascript模块，并将它们捆绑在一起成为一个文件。 Webpack还会自动执行每次更改代码时必须运行的某些任务。 它将自动执行这些任务，这样我们就不会每次都键入相同的命令。 如果您想了解更多，请访问。 开始使用 使用模板 1.首先，单击仓库顶部的绿色“使用此模板”按钮 2.确保在下拉列表中选择了您的github帐户并命名您的项目 单击绿色的“从模板创建存储库”按钮 将新存储库克隆到本地计算机 开工！ 开始项目 打开package.json文件，将name属性更改为应用程序的名称，然后将author更改为您的名称。 在命令行中，进入根目录并运行npm install OR npm i 。 要启动您的应用程序，请运行npm start 如果看到这个，就可以
vue-ts webpack 模板
fang_ze_zhang的博客
07-01 244
<template> #[[$END$]]# </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; @Component #set($capitalizedFilename = $NAME.substring(0,1).toUpperCase() + $NAME.substring(1)) export default class $capital
vue工程
m0_69719993的博客
08-06 245
前后端分离 前端服务器Nodejs 开发工具VsCode [我们为了和idea匹配使用WebStorm]. 安装它注意不要安装到中文目录下 验证是否安装完成: 因为前端项目也需要依赖一些插件:比如:axios elementui 那么我们可以使用npm下载并安装到当前项目。我们无需安装因为在nodejs中默认带了该软件 脚手架的作用:就是用来帮你创建前端vue工程。安装的命令: npm install -g @vue/cli速度很慢 在cmd窗口中输入 不行用这个http://localhost:8000
Vue工程
qq_45271323的博客
04-23 208
vue-cli 工程技术集合介绍 vue.js：vue-cli工程的核心，主要特点是 双向数据绑定 和 组件系统。 vue-router：vue官方推荐使用的路由框架。 vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。 axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise...
vue项目开发[1]:环境安装
weixin_34278190的博客
05-05 101
为什么80%的码农都做不了架构师？>>> ...
vue----webpack模板----路由传值
weixin_33951761的博客
02-24 148
1.路由传值的3种方式 通过动态路由<route-link>进行传值1.params传值 2.query传值 3.路由解耦 1.params传值（传值时，必须使用name属性，不能使用path属性） index.js路由配置项 path:"/details/:name/:price/:id",//属性可写可不写， 如果写了，就必须传相应的值，也可传其它的...
创建Vue脚手架，用的webpack模板
叁拾博客
08-17 297
创建Vue脚手架一、下Vue模板项目 一、下Vue模板项目 （我使用的工具是webstrom） vue-cli 是 vue 官方提供的脚手架工具 github: https://github.com/vuejs/vue-cli 作用: 从 https://github.com/vuejs-templates 下载模板项目 4.文件框中输入cmd命令，打开cmd窗口 5.在命令窗口输入npm install -g vue-cli命令，脚手架全局安装。 6.安装好输入vue检查，安装成功效果如下
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值