利用vue-cli和webpack创建一个Vue项目

最新推荐文章于 2024-05-17 13:15:29 发布
最新推荐文章于 2024-05-17 13:15:29 发布
阅读量734 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： Web前端 文章标签： vue web前端 webpack vue-cli
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35366269/article/details/82191820
本文详细介绍了如何通过全局安装vue-cli，然后使用webpack模板创建一个名为taobao的Vue项目。从项目的初始化配置，如项目名称、描述、作者，到选择使用Runtime + Compiler，安装ESLint，直到最后通过npm run dev运行项目并在浏览器中访问http://localhost:8081，成功显示项目页面。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

创建Vue项目

步骤如下：

1、全局安装vue-cli

     在工作空间下执行下面这段代码

cnpm install --global vue-cli

2、创建一个基于webpack模板的新项目

vue init webpack taobao

当前的taobao 就是项目的名称，注意：项目名称不能有大写字母

3、填写项目的名称，如果默认用taobao的名字作为项目的名称，那么回车即可

4、项目的描述，回车用默认的即可 

<

了解本专栏 订阅专栏 解锁全文 超级会员免费看
使用webpack创建vue项目
gdyhvy的博客
05-14 833
创建空文件夹 文件夹下执行：npm init 安装 webpack webpack-dev-server vue vue-loader npm i webpack-dev-server vue vue-loader 创建目录结构 main.js 中添加代码 //main.js import {createApp} from "vue"; import App from './app' const app = createApp(App) app.mount('#app') 在..
脚手架vue-cli及webpack
炑焽的博客
04-25 856
上一章我们学习了组件的使用，这一章讲解怎么使用vue cli脚手架的安装和使用。
webpack搭建的一个vue项目模板
08-29
所有技术 Vue +webpack+axios（http配置）+element+directive+filter+store+router(懒加载)+sass
安装vue-cli和webpack并创建vue项目
weixin_30571465的博客
10-15 140
1.　　没有安装过node.js,请先安装node.js,Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。使用node -v 检查node.js是否安装好及node.js版本。 2.　安装vue-cli,因为是全局安装，所以只需要运行一次就可以了。　　　安装成功后以后不必在安装，安装命令如下： npm install -g vu...
创建基于Webpack的Vue.js项目
逆境清醒的博客
03-19 6010
创建基于Webpack的Vue.js项目。一、Webpack简介。二、创建基于Webpack的Vue.js项目 1、前提条件(检查node和npm版本信息,升级你的 Node 版本)。2、安装Webpack、Vue.js。 3、创建基于Webpack的Vue.js项目。三、Webpack下的Vue.js项目文件结构。四、打开Vue项目管理器
webpack+vue+npm vue-cli 创建项目
小鱼酱的博客
05-20 508
安装nrm npm install nrm -g --save 帮助命令 nrm --help 显示所有配置 nrm ls 当前使用的源 nrm current 使用cnpm镜像 nrm use cnpm 添加源 nrm add 安装webpack npm install -g webpack 安装cli脚手架 npm install -g @vue/cli npm instal...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
本文将详细介绍如何使用Webpack 4和Vue来搭建一个Vue-cli项目，从而实现快速开发Vue应用。 首先需要了解，Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。它将应用程序中所需的各个模块...
详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
12-12
windows下vue-cli及webpack 构建网站(一)环境安装  windows下vue-cli及webpack 构建网站(二)导入bootstrap样式 windows下vue-cli及webpack 构建网站(三)使用组件  1、本篇文章是建立在以上三篇文章的基础上的...
vue-cli-webpack:从零开始搭Vue项目
05-09
vue-cli-webpack 从零开始搭Vue项目，主要是想脱离对脚手架全家桶的依赖，以及从中深入学习一点webpack相关的知识，不要每次打开package.json以及webpack的配置文件都一脸懵逼。 新建项目 mkdir vue-cli-webpack cd ...
笔记：webpack 创建Vue项目
qq_39108466的博客
03-16 3263
安装NodeJS 打开cmd（或新建文件夹，在webstorm中打开，使用Webstorm的Terminal命令行）确保已安装Nodejs 全局安装webpack npm install webpack -g 若使用淘宝镜像，则先安装淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org 再安装w...
vue-cli生成的基本项目
02-11
vue-cli生成的基本项目,最基本的东西，使用vue init webpack myproject命令生成
创建一个vue项目（webpack 和 vue-cli3）
最新发布
这个人很懒什么都没有留下
05-17 243
解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。所以选第一个独立放在一个文件。vue create project-name //project-name是你要创建的文件夹名字。Sass/SCSS (with dart-sass) //运行处时速度比node块。Linter / Formatter //规范层面。
使用webpack脚手架创建一个vue项目
Smell_rookie的博客
06-08 1748
使用webpack脚手架创建一个vue项目前言介绍前期环境准备开始创建项目 前言介绍 创建vue的项目方式有很多种，这里仅介绍使用webpack脚手架来创建一个vue项目，下面将创建一个movie为例的项目。 前期环境准备 第一步 ：安装好npm、node 从官网下载本机对应的npm版本和node版本，这里不做介绍。安装完成后检查是否安装成功。 检验方法：打开控制命令行程序-》cmd,输入node...
webpack 打包和手动创建一个vue的项目
weixin_30730151的博客
06-06 505
首先我们为啥要用webpack，为啥不用其他的打包的工具。 先听我捋捋， Webpack有人也称之为模块打包机，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins...
webpack vue-cli 创建项目流程
yongqian的博客
07-05 160
npm 安装 创建项目并运行项目 vue create vuecli3-porj cd vuecli3-porj 启动项目 npm run serve
webpack 创建vue项目的步骤
Q1761991696的专栏
03-02 1113
1.安装Node.js、 vue、 vue-cli、git 2.打开cmd 进入要创建项目的文件夹 3.输入 vue init webpack project（项目名称，注意必须都是小写） Project name 项目名 Project description A Vue.js project Author 默认，Git名 Vue build standalone （选第一个） Install vue-router？ Yes 后面都是No即可 根据提示,执行下面两个命令 cd
Vue学习笔记(关于Vue的介绍)
chenwwsdo123的博客
06-18 297
兼容性 Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 Vue官方推荐在浏览器中安装插件 Vue Devtools,它支持在一个更友好的界面去开发Vue的项目. 获取最新的Vue.js git clone https://github.com/vuejs/vue.git node_modules/vue cd node_modules/vue npm install npm run buil
使用vue-cli脚手架创建vue+webpack项目
Power的博客
06-15 1178
Vue-cli是快速构建这个单页应用的脚手架。 使用npm全局安装vue-cli（前提是你已经安装了nodejs，否则你连npm都用不了），在cmd中输入一下命令： 1.npm install –global vue-cli 安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功 2.vue init webpack Vue-Project 生成项目 3.npm insta...
使用webpack+vue-cli构建项目
ADLF
12-16 305
1、首先安装好node环境，然后再项目文件夹根目录下执行命令安装vue相关功能 npm install -g @vue/cli-init 2、初始化项目 vue init webpack project(你新建的项目名称/文件名称) 3、检验是否安装成功 npm run dev ...
快速搭建Vue.js项目：vue-cli与Webpack详解
"使用vue-cli脚手架工具搭建vue-webpack项目是一种高效且便捷的方法，尤其适合于大型和需要长期维护的Vue.js应用。它解决了手动配置复杂工具链的问题，如模块化、转译、预处理器、热加载、静态检测和自动化测试等，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郭宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值