从零开始搭建一个vue项目

从零开始搭建一个vue项目

一、环境准备

1.1 安装node.js

选择合适的LTS版本,然后下载安装,安装地址:https://nodejs.org/en/download

在命令行中查看已安装的node.js版本

shell 复制代码
node -v
v14.14.0

1.2 切换为淘宝的镜像源

解决国内下载慢的问题,命令行输入:

shell 复制代码
npm install -g cnpm --registry=https://registry.npm.taobao.org

如果报错:

复制代码
npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired

解决方案:

shell 复制代码
# 清除npm缓存
npm cache clean --force
# 取消ssl验证:
npm config set strict-ssl false
# 重新install
npm install -g cnpm --registry=https://registry.npm.taobao.org

命令行检查是否安装成功:cnpm -v

二、搭建vue环境

2.1 全局安装vue-cli

注意:安装vue-cli对node.js的版本推荐10以上版本

shell 复制代码
# 国外安装 
npm install -g @vue/cli
# 从镜像源下载
cnpm install -g @vue/cli 
shell 复制代码
# 查看安装的版本
vue --version
# 显示版本号说明安装成功
@vue/cli 5.0.8

如果需要升级版本

shell 复制代码
npm update -g @vue/cli
yarn global upgrade --latest @vue/cli

三、 创建vue项目

3.1 打开vue资源管理器

这里使用vue资源管理器创建项目,命令行直接输入vue ui ,然后会自动打开浏览器

shell 复制代码
C:\Users\zhouquan>vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

3.2 选择项目文件夹并创建项目

3.3 运行项目

3.4 在编辑器中运行项目

打开vscode,在终端命令行中输入 npm run serve ,即可运行项目

四、Vue项目中文件夹和文件的作用

  • dist 文件夹 :这是通过运行 npm run build 命令生成的静态资源文件夹,通常用于部署生产环境。

  • node_modules 文件夹:这个文件夹包含了通过 npm 命令下载的开发环境和生产环境的依赖包。

  • public 文件夹:有时也叫作 assets,它存放着项目中需要引用的资源文件,包括 css、js、images 以及 index.html。

  • src 文件夹:这是存放项目源码及需要引用的资源文件的文件夹。

  • src-api 文件夹 :这里放置了与 ajax 相关的代码文件,比如 index.js 中包含了相关的接口,而 ajax.js 则是封装了 axios 并包含了拦截器。有时也叫作 service,其中包含了自己配置的 vue 请求后台接口方法。

  • src-common 文件夹:这个文件夹包含了 stylus 的混合文件,用于存放一些公共的样式。

  • src-components 文件夹:这里存放了 Vue 开发中抽离的一些公共组件。

  • src-mock 文件夹:这个文件夹用于存放 mock 数据和模拟接口,通常用于在没有后台接口或者接口不完整的情况下进行模拟后台接口。

  • src-pages 文件夹:这个文件夹包含了涉及到路由的组件。

  • src-router 文件夹:这里存放了 Vue Router 相关的配置,包括路由器及路由的配置。

  • src-store 文件夹:这个文件夹用于存放 Vue 中的状态数据,用 Vuex 进行集中管理。

  • App.vue 文件:这个文件是整个工程的入口文件,用于渲染整个工程的 Vue 组件。

  • main.js 文件:这个文件是 Vue-cli 工程的入口文件,用于初始化 Vue 应用。

  • package.json 文件:这个文件用于管理项目的依赖包和定义启动、打包项目的 npm 命令。

  • build 文件夹:这个文件夹包含了 webpack 相关的配置和脚本,用于构建项目。通常我们偶尔需要用到其中的 webpack.base.conf.js 来配置 less、sass 等 CSS 预编译库,或者配置一些 UI 库。

  • config 文件夹:这个文件夹包含了主要的配置文件,用于区分开发环境和线上环境的不同。其中,config.js 可以配置开发环境的端口号、是否开启热加载,或者设置生产环境的静态资源相对路径、是否开启 gzip 压缩、npm run build 命令打包生成静态资源的名称和路径等。

相关推荐
前端极客探险家2 小时前
前端 Excel 工具组件实战:导入 → 可编辑表格 → 导出 + 样式同步 + 单元格合并
前端·typescript·vue·excel
有什么东东18 小时前
山东大学软件学院创新项目实训开发日志(20)之中医知识问答自动生成对话标题bug修改
java·vue·bug·springboot
络719 小时前
IDEA导入并启动若依项目步骤(SpringBoot+Vue3)
java·spring boot·mysql·vue·intellij-idea
脑瓜嗡3 天前
发送百度地图的定位
vue·php
巴啦啦臭魔仙3 天前
buildadmin 自定义单元格渲染
vue·php
小贺要学前端3 天前
前端如何优雅地对接后端
前端·性能优化·vue·前端优化
凕雨3 天前
Cesium学习笔记——坐标系统及坐标转换
前端·javascript·笔记·学习·arcgis·vue
前端极客探险家4 天前
打造一个 AI 面试助手:输入岗位 + 技术栈 → 自动生成面试问题 + 标准答案 + 技术考点图谱
前端·人工智能·面试·职场和发展·vue
末日的狂欢姐4 天前
AXUI - 极致原生体验的零依赖的国产 Web UI 框架,欢迎体验和共建!
javascript·前端框架·vue·网站建设·ui设计