第一个vue-li项目、创建vue-cli程序、Webpack学习2022-3-17

最新推荐文章于 2023-01-04 01:26:02 发布
最新推荐文章于 2023-01-04 01:26:02 发布
阅读量454 收藏 1
点赞数
分类专栏： css 笔记 文章标签： webpack vue.js 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56661579/article/details/123547342
版权
本文详细介绍了如何搭建第一个Vue项目，包括Vue CLI的安装和使用，以及Webpack的安装、验证和基本使用。在Vue CLI的帮助下创建项目，通过npm安装相关依赖，解决权限问题，最终完成Webpack的打包过程。
摘要由CSDN通过智能技术生成

一、Vue:第一个vue-li项目

1.1下载安装

1、nodejs 的下载地址：http://nodejs.cn/download/
安装很简单
2、下载完毕后在cmd里面输入：node -v和npm -v测试
在这里插入图片描述

3、然后下载一个淘宝镜像加速器：在cmd下输入npm install cnpm -g

在这里插入图片描述

4、安装vue-cli
输入命令npm install vue-cli -g
在这里插入图片描述

5、输入vue list
在这里插入图片描述

二、创建vue-cli程序

1、手动在cmd下创建一个项目
在这里插入图片描述

最低0.47元/天 解锁文章
心️要努力吖
关注
专栏目录
vue-li:一个Vue.js组件，可以使用Intersection Observer延迟加载图像
03-19
v懒惰图像 一个Vue.js组件，可以在使用进入视口时自动延迟加载图像。 你知道吗？在这里，您可以以简洁的格式学习有关Vue.js生态系统的提示，非常适合忙碌的开发人员！ :unicorn: 演示版 ， ， 用法 npm install v-lazy-image 警告：如果您要针对不支持该浏览器的浏览器，则需要安装 。 您可以全局注册该组件，以便在所有应用程序中都可以使用该组件： import Vue from "vue" ; import { VLazyImagePlugin } from "v-lazy-image" ; Vue . use ( VLazyImagePlugin ) ; 或在您的任何组件中本地使用它： import VLazyImage from "v-lazy-image" ; export default { components : { VLazyImage
搭建Vue脚手架（vue-cli）并创建一个项目【看这一篇就够了】【个人记录，以便后期参考】
weixin_43023873的博客
09-11 724
1、 安装nodejs环境 2、安装vue-cli 有npm和cnpm两种方式，网上都说cnpm好些，所以我也用的cnpm安装， 首先利用淘宝镜像安装cnpm npm inst...
Vue-CLI项目搭建
al6nlee的博客
11-13 72
目录Node.js安装下载安装环境变量配置配置npm在安装全局模块时的路径和缓存cache的路径换源测试常见命令Vue-CLI项目搭建CLI创建项目方式一：命令行创建-vue create方式二：使用图形化界面-vue ui如何删除CLI预设Vue项目运行运行项目方式一：在项目路径下输入npm run serve运行项目方式二：pycharm运行Vue项目目录导入导出模块的导入导出包的导入导出定...
使用vue-li构建项目的具体步骤
最新发布
白的夜的博客
01-04 200
【代码】使用vue-li构建项目的具体步骤。
vue-cli配置介绍
LI_YICHAO的博客
04-19 497
好多人只知道用vue-cli,却不知道脚手架的配置文件代表什么,现在就给大家介绍一下脚手架的相关配置. vue项目结构├── build --------------------------------- webpack相关配置文件 │ ├── build.js --------------------------webpack打包配置文件 │ ├── check-versions....
详解vue-cli之webpack3构建全面提速优化
01-19
伴随着vue的全球化，已经各种vue的组件框架越来越完善，从早期的element-ui到vux，iview等越来越多高质量的项目，使用vue进行前端构建已然是一件工程化，模块化，敏捷化的事情 在这其中，相信很多人都会选择官方的...
vue-cli+webpack项目 修改项目名称的方法
11-30
总的来说，修改`vue-cli`+`webpack`项目名称是一个涉及多个步骤的过程，需要细心操作以避免出现不必要的错误。遵循上述步骤，你可以安全地更改项目名称，并保持项目正常运行。同时，为了保持良好的代码管理和版本...
详解vue-cli3开发Chrome插件实践
12-10
之前找了不少如何开发谷歌插件的文章，结果发现都是些很基础的内容，并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢？如果通过webpack编译的... 创建一个vue-cli3项目： vue create vue-
使用 vue-lic3 创建 vue 项目
君非道的博客
12-14 2884
使用 vue-lic3 创建 vue 项目 在使用 vue-lic3 创建 vue 项目工程之前首先要确保已经安装了 nodejs，webpack vue-cli 是 vue 的脚手架，可以用配置好的模版快速搭建起一个项目工程，不用自己去配置 webpack 配置文件的基本内容。 安装 vue-cli 3.0 版本：通过 npm install -g @vue/cli或 yarn global ...
安装vue-li
qq_42453104的博客
04-21 803
安装vue-li 2020年4月21日，我决定开始从CSND上记录工作中遇到的一些问题及具体的解决思路，以便以后碰到同类问题之后重复踩雷，也是对工作的一个小总结吧。希望自己可以坚持下来把这件事情一直做下去。 ...
vue-cli搭建一个项目
爱coding的小蕾蕾
07-26 613
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 超级详细的vue-cli+webpack搭建项目 1.安...
在vue-cli+webpack项目中使用bootstrap
H 君的博客
04-19 177
首先新建一个webpack项目 新建项目： vue init webpack mybootstrap 安装组件： cnpm install 安装jQuery 因为bootstrap是依赖于jQuery的，所以要先装上jQuery。 cnpm install jquery@2.1.1 -D 可通过npm view jquery version查看jquery版本信息。 下载bootstrap 下载b...
搭建vuec-li脚手架项目
OYXL2000的博客
08-19 525
NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题,npm就是前端的Maven。【 若网络不好，则会跳出以下两行代码，敲Y回车或直接回车就可以，网络良好则不会跳出如下两行。5.选中以下三个模块，按上下方向键选择相应的模块，按空格选中或取消选中 ，回车。下载nodejs，文件很小，只有二十几兆，下载后直接安装，一直点下一步即可。下载完成后，win+r并输入cmd打开命令面板，输入。，出现版本号则安装成功，npm也安装成功，输入。
vue li快速定位功能
wusq的博客
03-29 616
1.功能描述 如图，监听输入框输入的内容，自动定位到第一个匹配的内容 2.完整代码 <template> <div> <el-input v-model="searchVal" placeholder="输入内容快速定位" class="anchor-input" clearable @input="searchValIpt" /> <div class="list"> <ul> <li v-
07-vue(vue-li入口文件main.js分析,css作用域控制,路由原理,路由vue-router插件的使用,仿网易简单案例用vue-router,element轮播图)
Tangoneone的博客
05-13 381
01-Vue-cli 入口文件main.js分析 main.js中 创建了最外层的Vue实例 把App.vue这个组件，当做Vue实例内部的最顶级组件并渲染出来 和public/index.html 中的那个id为app的div关联起来 简单来说,main.js会弄好一些内容,然后把这些内容替换index.html里面的那个id为app的标签 public/index.html 文件: <!DOCTYPE html> <html lang="en"> <head&g
Lison《vue技术栈开发实战》（一）
yfm120750310的博客
04-07 299
这里写目录标题第01章 使用vue-cli3创建项目使用Vue UI创建、管理项目项目结构目录整理初始文件添加基本配置详解使用代理解决跨域第02章 路由基础篇router-link和router-view组件路由配置JS操作路由重定向和别名第03章 路由进阶篇路由组件传参HTML5 History模式导航守卫路由元信息过渡效果 第01章 使用vue-cli3创建项目 使用Vue UI创建、管理项目 cmd中输入vue ui进行启动， 项目结构目录整理 创建后的基本目录： 初始文件添加 看下文件补充后的目录
Vue-cli使用说明
weixin_33778778的博客
04-20 348
2019独角兽企业重金招聘Python工程师标准>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值