从零开始搭建一个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 命令打包生成静态资源的名称和路径等。

相关推荐
计算机-秋大田3 小时前
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
java·论文阅读·spring boot·后端·vue
Yaml413 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf16 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班