如何搭建一个vue项目

2022/8/11 23:30:17

本文主要是介绍如何搭建一个vue项目,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一 安装nvm(node的版本管理工具:一个nvm可以管理很多node版本)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

 

1 注意:

v0.39.1这是nvm的版本号,当前最新版本是v0.39.1。详见 

2 常用的nvm命令:

命令描述
nvm ls-remote 列出远程服务器上所有的可用版本,当前命令需要使用网络
nvm list 列出目前在本地的nvm里面安装的所有node版本
nvm install <node版本号> 安装指定版本的node.js
nvm uninstall <node版本号> 卸载指定版本的node.js
nvm use <node版本号> 临时切换当前使用的node.js版本
nvm alias default <node版本号> 切换当前系统默认使用的node.js版本,设置指定版本的node.js解析器为默认版本

 

二 安装node(基于Chrome V8引擎的JS运行环境)

1 安装最新稳定版本

nvm install stable

 

2 安装指定版本

nvm install v16.16.0

Node.js如果安装成功,可以查看Node.js的版本,在终端输入如下命令:

node -v

三 包管理器

3.1 包管理器npm(安装node.js完成后,在node.js中会同时帮我们安装一个包管理器npm)

 

可以借助npm命令来安装node.js的包。这个工具相当于python的pip包管理器。

常用的npm命令:


命令
描述
npm install -g <包名> 安装node包模块 -g表示全局安装,如果没有-g,则表示在当前项目安装 npm install <包名> 可以简写成"npm i <包名>"
npm list 查看当前项目目录下已安装的node包模块
npm view <包名> engines 查看node包模块所依赖的Node的版本
npm outdated 检查node包模块是否已经过时,命令会列出所有已过时的node包模块
npm update <包名> 更新node包模块
npm uninstall <包名> 卸载node包模块
npm <包名> -h 查看指定node包模块的相关命令或帮助文档
npm run <子选项> 启动项目

3.2 包管理器yarn(第三方开发者提供了比npm更好用的yarn包管理器)

安装yarn包管理器

npm install -g yarn

yarn基本使用命令

命令描述
yarn global add <包名> 全局安装包或模块,如果去掉global选项则表示本次项目安装
yarn remove <包名> 卸载/移除包或模块
yarn 根据在当前项目目录下的package.json的配置自动下载安装包列表,也可用yarn install
yarn dev 根据在当前目录下的package.json文件的配置启动一个http服务器运行前端项目
yarn init 根据在当前目录下自动生成一个package.json配置文件,用于自动构建前端项目
yarn publish 把当前目录下文件根据package.json配置,作为一个开源包发布到官方维护的包管理器列表中。

四 安装项目构建工具

vue2.0官方推荐使用vue-cli,vue3.0官方推荐使用vite2.0。

4.1 使用Vue-CLI创建vue项目

1 安装vue-cli

npm install -g @vue/cli
# yarn global add @vue/cli  # 注意,安装不成功就换成npm

安装完成以后,可以通过以下命令查看vue/cli的版本

vue -V

2 生成vue项目

cd ~/Vue
# vue create 项目目录名   # 会自动创建一个目录用于保存项目的。
vue create myproject

3 跟着官方提示,输入命令。最后打开链接地址,访问项目,http://localhost:8080

4.2 使用Vite创建vue项目

1 安装vite

npm create [email protected]
# yarn create vite

2 跟着官方提示,设置项目目录名和各项配置。终端下通过以下命令直接运行项目。

# yarn dev --host=0.0.0.0 --port=5173
vite --host=0.0.0.0 --port=5173 # 默认--host=127.0.0.1 --port=5173

3 访问页面

 

五 项目执行流程

 

 项目执行流程图

 

5.1 项目执行流程图说明

整个vue项目最开始用户访问的是主文件index.html,index.html中会引入src文件夹中的main.js,main.js中实例化vm对象,并导入顶级的单文件根组件src/App.vue,App.vue中会通过组件嵌套或者路由来引用页面组件,views组件会根据开发的页面需要加载components文件夹中的其他单文件子组件。

 

5.2 项目的目录结构

项目根目录/
├── index.html          # vue项目唯一的html页面,整个项目所有的内容都是被index.html加载提供给用户访问的
├── node_modules/  # 前端项目运行的依赖库目录,如果缺少则在项目根目录下,使用yarn或者npm update来恢复
├── package.json      # 前端项目运行的依赖库的配置文件[通用],类似于python的requirements.txt
├── yarn.lock            # 项目运行的依赖库的配置文件[yarn]
├── vite.config.js      # 项目构建工具vite独有的运行配置文件,一般用于设置跨域代理 
├── public/               # 访问入口目录,部分版本的vue的index.html入口文件会保存到这里,也可能不在这里
├── src/                    # 项目的源码目录,是项目的核心,所有的源代码都保存在这里
         ├── App.vue            # 项目的根组件,由App.vue进行加载所有的组件页面和子组件
         ├── assets/             # 资产目录,保存项目所需的静态资源[img/视频/音频等附件]
         ├── router/             # 路由文件存储目录,保存项目所有的路由文件
                   └── index.js   # 默认的主路由文件,负责导入vue组件与url地址进行一对一的映射
         ├── components/   # 子组件目录,保存一些零零碎碎的部分页面内容的组件
         └── main.js             # 全局初始化入口脚本,index.html被运行时会自动加载这个js文件。
└── dist/                         # 项目开发完成以后肯定要把项目部署上线,前端人员就需要编译整个项目,编译后的代码保存这里。 

 



这篇关于如何搭建一个vue项目的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程