从零开始搭建一个VUE项目 三种方式

官网的方法装备VUE 环境

1 装置node环境

翻开Node官网点击下载相应的版别
官网下载地址： nodejs.cn/download/

下载完成后 能够检查自己是否下载成功
CMD 输入 node -v
如图

2 搭建VUE项目环境

1 新建一个文件夹，放置vue项目代码

2 用开发工具翻开demo文件夹

3 大局装置 vue-cli
yarn global add vue-cli

运转之后

检查装置是否成功

创立一个新的项目

vue create lemon [lemon 是项目名称]

挑选vue 3 和yarn 包管理工具

项目创立成功 项目目录

-   -- node_modules # 装置的库依靠
-   -- public # 相当于vue-cli2中的static，打包后原封不动的放在dist中
-   -- src # 源代码
-   -- .browserslistrc # 装备浏览器相关的东西
-   -- .gitignore # 装备git相关的东西，能够装备忽略一些文件
-   -- .babel.config.js # 装备 babel
-   -- package.json
-   -- package-lock.json # 显现的实在的装置版别(package.json中或许有~或者 ^ 后面加版别号，因而或许   会装置不同版别的依靠)
-   -- readme.md # markdown 文档

cd lemon [进入lemon文件夹 lemon 就是之前创立好的项目文件]
yarn serve 项目发动指令
成功发动

浏览器翻开如图所示：

webpack 方法装备vue 环境

1 装置

 npm i -g @vue/cli-init

2 创立项目

vue init webpack orange //  orange  是项目名称

? Project name orange  // 项目名称
? Project description A Vue.js project  项目描绘
? Vue build standalone     直接 能够回车  
? Install vue-router? Yes  是否装置路由 
? Use ESLint to lint your code? Yes 是否装置eslint 校验
? Pick an ESLint preset Standard eslint 预设规范
? Set up unit tests Yes 设置单元测验 
? Pick a test runner karma 挑选一个测验者
? Setup e2e tests with Nightwatch? No 是否装置测验结构 所谓的用户实在场景 建议no  
? Should we run `npm install` for you after the project has been created? (recommended) yarn  //创立后的发动指令是 yarn 

装备成功 运转页面：

Vite 装备 vue 环境

用Vite 创立项目

yarn create vite mango --template vue //  [--template vue] 这个是模板 [mango]项目名

支持的预设模板

装置成功

目录文件

运转成功页面