搭建前端项目系列（一）————所需技术文档教程合集

技术基础

• vue.js 官网：https://cn.vuejs.org/
• vue.js 教程：https://www.runoob.com/vue3/vue3-intro.html
• vue-router 教程：https://router.vuejs.org/zh/
• vuex 教程：https://vuex.vuejs.org/zh/guide/
• element 教程：https://element.eleme.cn/#/zh-CN

开发环境

开发工具，visual studio code

• 下载地址：https://code.visualstudio.com/
• 官网教程：https://code.visualstudio.com/docs

安装 node js

• 下载地址：http://nodejs.cn/download/
• 中文官网：http://nodejs.cn/api/
• 菜鸟学堂：https://www.runoob.com/nodejs/nodejs-tutorial.html

安装 webpack

webpack 是一款大包工具，-g代表全局安装，命令如下：

npm install webpack -g

教程：https://www.runoob.com/w3cnote/webpack-tutorial.html

安装 vue-cli

安装 vue 脚手架项目初始化工具 vue-cli，-g 表示全局安装，命令如下：

npm install vue-cli -g

淘宝镜像

npm 适用的是国外中央仓库，就像 maven 有国内镜像一样，npm 在国内也有镜像可用，如淘宝镜像，安装成功后用 cnpm 替代 npm，如 cnpm install webpack -g

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 yarn

yarn 是 facebook 发布的node.js 包管理器，比 npm 更快、更高效，可以使用 yarn 替代 npm，安装命令如下，安装完之后设置淘宝镜像：

npm i yarn -g -verbose
yarn config set registry https://registry.npm.taobao.org

使用 yarn 跟 npm 差别不大，具体命令关系如下：

npm install => yarn install
npm install --save [package] => yarn add [package]
npm install --save-dev [package] => yarn add [package] --dev
npm install --global [package] => yarn remove [package]
npm install --save-dev [package] => yarn remove [package]