前端vite+vue项目创建及初始化

最新推荐文章于 2024-10-04 00:18:00 发布

宛如清风03

最新推荐文章于 2024-10-04 00:18:00 发布

阅读量1.1k

点赞数

文章标签：前端 javascript node.js

本文链接：https://blog.csdn.net/ZhouXin1111112/article/details/128283773

版权

1.环境准备

1.1 开发工具 HbuildX

下载地址：https://www.dcloud.io/hbuilderx.html

1.2语言环境 Node.js

脚本语言需要一个解析器才能运行，node.js就是一个解析器，javascript是脚本语言，再不同的位置有不一样的解析器，如写入html的js语言，浏览器是它的解析器角色。二对应需要独立运行的js，则需要node.js来解析。

node下载地址：https://nodejs.org/en/download/releases/

1.3 Windows平台安装Node.js

1.进入node下载地址网页，选择合适的版本（下哪个版本影响不大），点击download

2.点击download后，以64位电脑为例，下载msi文件

这里直接附上下载链接：https://nodejs.org/download/release/v18.8.0/node-v18.8.0-x64.msi

下载完成之后直接点击下一步安装即可。

3. 在电脑上按住"win+r"，输入cmd打开命令提示符窗口，输入npm --version或者node，如果能输出版本信息，即表示安装完成。

npm是一个包管理工具，类似于linux中的yum或者理解为windows的软件管家。npm负责管理node环境下的工具，即在node环境下安装东西都可以用npm。

1.4安装yarn

打开命令提示窗，输入npm install -g yarn 其中-g表示global 全局安装

检验yarn是否安装成功：输入yarn --version 若有正常输出且不报错则表示安装成功

yarn也是一个包管理工具，功能与npm差不多，它可以让我们安装并使用全世界开发者的代码。yarn能够快速、安全并可靠地完成这些工作，除此之外，yarn还解决了包源问题，安装过程中不会受到网络地干扰，后期我们用到yarn比较多。

报错解决

若是遇到此类报错结果，etimeout表示超时，其实就是一个网络问题，比如我们连接的目标站点在国外，链接过去就很慢。遇到这种情况我们可以设置一个国内资源，输入npm config set registry https://registry.npm.taobao.org

然后再重新安装。若是很久没有反应，则也是网络问题，按住"Ctrl+C"终止，再采用此方法即可。

若是遇到其他报错，安装yarn失败，参考这里https://blog.csdn.net/qq_40132161/article/details/103697245

2.vite+vue项目创建

2.1进入想要创建项目的目录

1.方法一

在电脑上找到你想要创建项目的位置（即路径），并进入该文件夹，按下Shift键同时右击鼠标，点击在此处打开Powershell窗口，然后输入start cmd，即可进入该路径下的命令提示符

2.方法二

在电脑上找到你想要创建项目的位置（即路径），并进入该文件夹，点击上方的搜索栏，输入cmd即可

2.2创建项目

1.输入 yarn create vite + 项目名，然后选择Vue框架后按下回车键，这里以项目名为love-travelling为例，如下图

2.选择TypeScript语言,如图

Typescript是JavaScript的一个超集，由微软开发，设计的目的就是开发大型应用。

TypeScript不能被浏览器直接执行，但是可以先编译成JavaScript，再在浏览器或nodejs上运行。

3.创建项目完成，若显示如下图，则项目创建完成

2.3进入项目路径

若要对项目进行操作，必须要先切换到项目的路径里去，在命令提示符窗口输入cd+项目名

2.4安装项目依赖（vue+vite)

输入yarn，因为这个项目是基于vue和vite的，所以yarn会帮我们把vue和vite所有的东西都安装上

2.5运行项目

输入yarn dev，运行项目之后就可以在浏览器上看效果了，这里红色方框内的就是项目的地址，直接复制到浏览器上打开查看效果即可

报错解决

1.若是出行timeout的错误，则向上面的方法一样，设置一个国内源，

npm config set registry https://registry.npm.taobao.org

2.若是出现以下错误，则是因为前面Nodejs安装在了中文目录下，导致yarn无法识别node库，同时还要检查安装目录是否有空格。卸载重新安装nodejs即可。（为避免此类问题，建议目录都用英文，不要用其他的数字或中文)

3.项目初始化

3.1项目基本文件的作用

3.2在src目录下创建基础文件夹

views 文件夹存放界面
components 文件夹存放界面中局部组件
config 文件夹存放各种全局配置
router 文件夹存放路由
api 文件夹存放自定义的api请求函数
store 文件夹存放vuex相关文件
assets/style 文件夹存放样式
assets/imgs 文件夹存放图片
plugins 文件夹存放各种插件
utils 文件夹存放全局工具集（自定义封装的一些函数）
service 文件夹存放服务器端相关操作，接口等

3.3修改index.html

App.vue是挂载到index.html文件上的，在index.html中配置有整站的基本信息，因此可以通过配置index.html的内容来对自己的项目做定制

修改页面标题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>爱旅游</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>