快速搭建 Vue 项目

Designer 小郑

全栈领域优质创作者

博客专家认证

2023-01-13 03:41:04

课时名称	课时知识点
快速搭建 Vue 项目	快速搭建基于 View UI组件库的 Vue 项目，让同学们对 Vue 有个初步的了解

...全文

318 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

Vue3+Vite快速搭建vue项目webpack的特点Vite较webpack不同与改进之处Vite缺点安装node.js(正文开始，已安装的可以跳过此步骤)npm镜像设置及cnpm安装使用vite快速搭建vue项目 webpack的特点 webpack打包过程 1.识别入口文件 2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖 3.webpack做的就是分析代码。转换代码，编译代码，输出代码 4.最终形成打包后的代码

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli 安装命令 npm install -g vue-cli 用vue-cli命令，快速搭建一个webpack的项目： vue init webpack 项目结构入口文件：需要注意的是，我们看到有一类后...

①输入pnpm create vue@latest ，并输入你想创建的项目名称。③然后再进入目录cd vue-project运行pnpm install。②检查nvm是否安装成功(安装成功会显示对应的版本）①在代码目录下创建一个文件夹，然后用VSCode打开。②输入项目名称vue-project，选择vue。⑦进入项目，运行pnpm install。①Win+R指令，打开命令框输入cmd。③输入pnpm create vite。④进入项目，运行npm install。⑤选择vue，然后回车。

如果没有安装，可以去官网（https://nodejs.org/）下载并安装最新版本的Node.js。点击下一步，直到点击install，并等待安装完成。安装完成后查看一下环境变量是否配有node.js的路径，没有则配置node.js的环境路径。创建完项目后，控制端页面会如上图所示，此时我们我们只要按上图提示内容，执行相关命令即可。即可访问本地地址：http://localhost:8080/，即可出现如下界面。把cmd关掉，再次打开，输入vue -v，出现如下信息，代表安装完成。重启vs code即可。

快速创建vue项目

郑为中的课程社区_NO_1

7

社区成员

47

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章