Vue、Webpack、Vue-cli环境搭建

1. Node

下载安装：

https://nodejs.org/zh-cn/download/

• .msi是Windows installer开发出来的程序安装文件，它可以让你安装，修改，卸载你所安装的程序。.msi就是Windows installer的数据包，把所有和安装文件相关的内容封装在一个包里。
• .zip是一个压缩包，解压之后即可，不需要安装。

安装完成后，.msi格式的安装包已经将node.exe添加到系统环境变量path中,如果你下载的是.zip格式，因为没有安装过程，所以需要手动将node.exe所在目录添加到环境变量path中。
查看node版本:

## 查看node版本
node -v   ## v14.4.0
## 查看npm版本
npm -v   ## 6.14.5

修改全局依赖包下载路径:

## 查看全局安装的包的路径
npm root -g  ## C:\Users\24891\AppData\Roaming\npm\node_modules
## 修改全局包下载目录为C:\node\node_global
npm config set prefix "C:\node\node_global"
## 缓存目录为C:\node\node_cache
npm config set cache "C:\node\node_cache"

全局安装vue脚手架：

npm install @vue/cli -g
##如果安装失败要么重装node 要么删除文件夹 C:\Users\24891\AppData\Roaming\npm-cache

2. Webpack

安装webpack：

## 全局安装
npm install webpack@4.43.0 –g
## 本地安装   --save-dev是本地安装
npm install webpack@3.6.0 --save-dev
## 查看webpack的版本
webpack -v    ## 4.43.0
## 创建package.json文件
npm init -y

添加webpack.config.js文件：

const path=require('path'); //调用node.js中的路径
module.exports={
    entry:{
        index:'./src/js/index.js' //需要打包的文件
    },
    output:{
        filename:'[name].js',    //输入的文件名是什么，生成的文件名也是什么
        path:path.resolve(__dirname,'../out') //指定生成的文件目录
    },
    mode:"development"    //开发模式，没有对js等文件压缩，默认生成的是压缩文件
}

运行webpack：

webpack --config config/webpack.config.js

配置package.json：
"start": "webpack --config config/webpack.config.js"

{
  "name": "TestWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config config/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^3.6.0",
    "webpack-cli": "^3.3.8"
  }
}

配置完成后打包：

npm run start

3. Vue-cli

全局安装：

## 安装脚手架3
npm install -g @vue/cli
## 查看脚手架的版本
npm --version  ## @vue/cli 4.4.4
## 拉取脚手架2
npm install -g @vue/cli-init

初始化项目：

## 脚手架2
vue init webpack my-project
## 脚手架3
vue create my-project

安装插件：

## 安装vue-router
npm install vue-router --save
## 安装vuex
npm install vuex --save
## 安装axios
npm install axios --save