首页 前端知识 Vue工程化项目创建-VueCli与Vite

Vue工程化项目创建-VueCli与Vite

2024-06-16 09:06:21 前端知识 前端哥 850 396 我要收藏

在完成了node.js的安装之后,我们就可以正式来创建我们的Vue工程化项目了,我目前学习到两个创建工程化项目的工具是Vue-Cli还有Vite,其中VueCli可用于创建vue2与vue3的项目,而Vite是比较新的,它只能创建vue3的工程化项目。以下为大家演示是用VueCli创建vue2还有Vite创建vue3,这也是我学习时所用到的。

  1. Vue-Cli创建Vue2项目

  • 在创建之前需要全局安装vue与vue-cli,打开cmd执行以下两个命令:

npm i -g vue
npm i -g @vue/cli
  • 安装完毕之后,打开cmd,进入到需要创建项目文件的路径,执行以下命令创建项目文件

vue create 项目名称(项目名称要用英文命名,不包含大写)

  • 点击enter进入到创建的配置界面,可以选择默认vue3创建,默认vue2创建,还有自定义创建,这里我选择直接创建vue2(关于自定义创建可以选择router,Vuex等)

  • 确定后等待自动创建vue2项目,创建成功后会显示以下画面

  • 根据提示输入蓝色的命令即可启动服务,输入命令:

cd 项目名称
npm run serve
  • 当出现以下Done提示后,就说明项目已经启动成功了,我们复制给出的Local或者Network地址,去浏览器里打开,就能成功看到我们的vue2项目了

  • 我们可以回到创建的项目目录,将项目文件夹用编辑器打开(个人推荐VScode),就可以在里面进行代码编写了~

2.Vite创建vue3项目(基础篇)

相较vue-cli,vite的项目文件创建速度更快,体积更小,创建的步骤也更简单

  • 进入到需要创建文件的目录路径,在此目录路径打开cmd,输入以下两个命令的其中一个,本案例选择第二个

npm init vite-app 项目名称 // 二选一
npm init vite@latest
  • 在输入 npm init vite@latest 后回车,会提示选择你的项目名称(英文命名),点击回车

  • 接下来会进入选择框架,我们学习的是vue,就选择vue框架

  • 接下来后我们会选择一门编程语言,由于Vue+TypeScript已经是大势所趋,而且非常好用,我们这里选择TypeScript,而且Ts是Js的超集,所以Ts也是兼容Js的,所以不用担心不兼容的问题。

  • 点击回车后,我们的vue3项目文件就创建好了

  • 接下来是启动我们的项目文件,启动项目文件之前,我们先需要安装依赖,执行以下命令

cd 项目名称(创建时候的项目名称)
npm install
  • 安装完依赖之后,我们就可以正式启动我们的项目了,运行以下命令启动服务

npm run dev
  • 接下来就是将Local地址复制到浏览器中,就能看到我们的vue3项目了

3.Vite创建vue3项目(补全版)

如果我们用上一个步骤创建vite项目,得到的是一个基本能运行的版本,但是我们知道,在vue中包括有router,vuex,eslint等插件,我们可以后期一个一个进行引入,但是我们知道一个成熟的项目是会包括路由,代码规范等插件的,所以我们可以在创建项目之初就一同全部引入了,这样可以解决不少麻烦

  • 进入到需要创建文件的目录路径,在此目录路径打开cmd,输入以下命令

npm init vue@latest
  • 在输入 npm init vue@latest后回车,会提示选择你的项目名称(英文命名),点击回车

  • Add TypeScript? - 选择yes

  • Add JSX Support? - 选择yes

  • Add Vue Router for Single Page Application development? - 选择yes

  • Add Pinia for state management? - 选择yes

  • Add Vitest for Unit Testing? - 选择yes

  • Add an End-to-End Testing Solution? - 选择no

  • Add ESLint for code quality? 选择yes

  • Add Prettier for code formatting? 选择yes

在选择完这些插件后,接下来是启动我们的项目文件,启动项目文件之前,我们先需要安装依赖,执行以下命令

cd 项目名称
npm install
  • 安装完成后执行以下命令

npm run dev

以上步骤如果能够正常运行即可,如果报错了,大概率是因为node版本太低了,如图所示

解决方案是需要安装更高版本的node,一个方法是将先将node先删除,然后重新下载一个更高版本的。但是这个方法太花费时间了,如果我们回去开发vue2项目,太高版本的node也会有兼容问题,所以我这里推荐的是nvm管理工具,关于nvm管理工具的安装和配置请看我主页的 Vue工程项目创建的前提-node.js的安装 步骤二的“安装nvm管理工具”

当我们安装完nvm后,就能在里面管理我们的node版本了

nvm list available          // 显示可以安装的所有node.js的版本
nvm install <version>       // 安装node.js的命名 version是版本号 例如:nvm install 8.12.0
nvm ls                      // 显示所有安装的node.js版本
nvm use <version>           // 切换到使用指定的nodejs版本
  • 我这里已经安装过一个高版本和一个低版本node了,所以直接运行命令 nvm ls 查看 已安装的node,然后再执行nvm use 版本号 就可以切换node了

  • 然后我们重新回到项目的根目录路径,重新运行 npm run dev,项目就能正常启动了

  • 接下来就是将Local地址复制到浏览器中,就能看到我们的vue3项目了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12341.html
标签
评论
发布的文章

json文件的格式转换

2024-06-21 09:06:48

JSON 现代数据交换的利器

2024-06-21 09:06:41

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!