Vue安装教程 (一)

雨点打透心脏的1/2处 2022-11-27 07:18 186阅读 0赞

### 目录 ###

*  1. 安装清单
 *  2. Node安装
 *   *  2.1 Windows 中安装
     *  2.2 Mac中安装
     *  2.3 NVM
 *  3. Webpack安装
 *  4. Vue安装
 *  5. Vue-cli安装
 *  6. 创建项目
 *  7. 目录结构

# 1. 安装清单 #

1.  node
2.  webpack
3.  vue
4.  vue-cli

# 2. Node安装 #

**node一定要8.11以上版本，如果以前安装过node并且8.11以上那么跳过这个步骤。**  
[node下载地址][node]

## 2.1 Windows 中安装 ##

找到LTS，Windows Installer 中 **.msi**后缀这一行，根据自己系统选择32位或者64位，点击下载。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70_pic_center]  
下载后得到一个**node-v版本号x位数.msi**文件，双击打开：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70_pic_center 1]  
最后疯狂点击Next下一步，Next下一步，Next下一步，Next下一步，Install安装，直到提示安装成功。  
安装成功后在CMD测试下是否成功，打开CMD输入

node -v
    npm -v

![在这里插入图片描述][20200814132619399.png_pic_center]  
出现版本号就OK了~

## 2.2 Mac中安装 ##

1.  官网下载.pkg包安装
2.  通过brew安装

brew install node

## 2.3 NVM ##

也建议使用nvm，很爽，可以自由切换node版本。  
![在这里插入图片描述][20200814140039200.png_pic_center]

# 3. Webpack安装 #

**建议webpack安装在项目里，不要全局安装，在项目内安装这一步骤可以直接跳过。**

1.  安装最新版本

npm install webpack

1.  安装指定版本，如需要3.3.3版本

npm install webpack@3.3.3

1.  全局安装

npm install --global webpack

> 官网原话，不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install --save-dev webpack-cli

# 4. Vue安装 #

1.  安装最新版本

npm install vue

1.  安装指定版本，如需要3.3.3版本

npm install vue@3.3.3

1.  全局安装

npm install --global vue

# 5. Vue-cli安装 #

Vue-cli是官方提供的一个SPA单页面应用的脚手架，基本上项目开发都用它，如果项目重SEO可以考虑Nuxt这个脚手架。  
官方介绍 Vue CLI 是**一个基于 Vue.js 进行快速开发的完整系统**，提供：

> 通过 @vue/cli 实现的交互式的项目脚手架。  
> 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。  
> 一个运行时依赖 (@vue/cli-service)，该依赖：  
> 可升级；  
> 基于 webpack 构建，并带有合理的默认配置；  
> 可以通过项目内的配置文件进行配置；  
> 可以通过插件进行扩展。  
> 一个丰富的官方插件集合，集成了前端生态中最好的工具。  
> 一套完全图形化的创建和管理 Vue.js 项目的用户界面。  
> Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

安装

npm install -g @vue/cli

安装后查看版本来验证是否安装成功

vue --version

同样出现版本号就OK啦~

# 6. 创建项目 #

[Vue创建项目 (二)][Vue_]

# 7. 目录结构 #

[Vue目录结构 (三)][Vue_ 1]

[node]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/2f5e6ca92a624d91a4492d9a1d1c7a5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/ea754809692a4e8385460157c795fa54.png
[20200814132619399.png_pic_center]: /images/20221124/b021417756874e10bde5fe73e67570f3.png
[20200814140039200.png_pic_center]: /images/20221124/66ebd5557a694c50ae3ca65f5a6219da.png
[Vue_]: https://blog.csdn.net/m0_37797410/article/details/108003924
[Vue_ 1]: https://blog.csdn.net/m0_37797410/article/details/108071274