-
搭建一个Vue项目
一、安装node环境
1、下载node
2、检查是否安装成功
node -v npm -v- 1
- 2
3、为了提高我们的效率，可以使用中国镜像站（原淘宝镜像）
https://registry.npmmirror.com
npm install cnpm -g --registry=https://registry.npmmirror.com- 1
查看版本，检查是否安装成功，安装成功后，需要使用npm的就可以用cnpm代替了
二、搭建vue环境
1、全局安装vue-cli
npm install --global vue-cli- 1
查看是否安装成功，检查vue版本vue --version vue -V vue list- 1
- 2
- 3
2、进入项目目录，创建一个基于 webpack 模板的新项目
vue init webpack 项目名- 1
/ 说明 操作 Vue build 打包方式 回车 Install vue-router 是否需要安装Vue-router,项目中需要 输入Y后回车 Use ESLint to lint your code 是否需要JS语法检查，暂时不需要 输入n后回车 Set up unit tests 是否安装单元测试工具，暂时不需要 输入n后回车 Set e2e tests with Nightwatch 是否需要端到端测试工具，暂时不需要 输入n后回车 3、进入项目目录，运行项目
cd vue-test 进入项目目录 npm install 安装依赖 npm run dev 运行项目- 1
- 2
- 3
访问测试，如下则安装成功
利用vue-cil初始化构建vue项目，我们会获得一个初始化的文件夹结构
三、vue项目目录详解
文件夹名 作用 build 构建脚本目录 config 构建配置目录 node_modules 依赖的node工具包目录 src 源码目录 static 静态文件目录 test 测试文件目录 1、build 构建脚本目录
文件名 作用 build.js 生产环境构建脚本 check.version.js 检查npm、node.js脚本 utils.js 构建相关工具方法 vue-loader.conf.js 配置了CSS加载器以及编译CSS之后紫铜添加前缀 webpack.base.conf.js webpack基本配置 webpack.dev.conf.js webpack开发环境配置 webpack.prod.conf.js webpack生产环境配置 2、config构建配置目录
文件名 作用 dev.env.js 开发环境变量 index.js 项目配置文件 prod.env.js 生产环境变量 3、src资源目录
文件夹名 作用 assets 资源目录，放置一些图片或者公共JS、公共CSS。这里的资源会被webpack构建 components 组件目录，我们写的组件就放在这个目录 router 前端路由，我们需要配置的路由路径写在index.js里面 4、其他文件
文件名 作用 App.vue 页面级vue组件 main.js 入口js文件 index.html 首页入口文件，可以添加一些meta信息等 package.json npm包配置文件，定义了项目的npm脚本，依赖包等信息 README.md 项目的说明文档，Markdown格式 .xxx 这是一些配置文件，包括语法配置，git配置等 四、常用快捷键
操作 指令 打开cmd win + r 终止运行 crtl + c 返回上一级 cd … 切换E盘 e: 访问文件 cd + 文件名 -
相关阅读:
质量平台-sonarlint-接入项目gitlab配置
Linux（3）：Linux 的文件权限与目录配置
webrtc一对一视频通话功能实现
ubuntu20.04配置cuda11.5记录
指向指针的指针pp指向指针p
Triton Inference Server 环境配置
实现一个简单的 ctrl+ f 搜索
pytorch中的view与reshape
React 18 + Hooks +Ts 开发中遇到的问题及解决方案！
2023 年前端编程 NodeJs 包管理工具 npm 安装和使用详细介绍
- 原文地址：https://blog.csdn.net/weixin_46822367/article/details/124845295