1. 安装清单

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

2. Node安装

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

2.1 Windows 中安装

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

node -v
npm -v

在这里插入图片描述
出现版本号就OK了~

2.2 Mac中安装

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

2.3 NVM

也建议使用nvm,很爽,可以自由切换node版本。
在这里插入图片描述

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创建项目 (二)

7. 目录结构

Vue目录结构 (三)

Logo

前往低代码交流专区

更多推荐