vue2+webpack4项目搭建

vue2+webpack4项目构建

环境及依赖

• node

node -v

v16.13.0

• npm

npm -v

8.1.0

• webpack

webpack -v

4.42.1
如果提示 webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。 则需要先安装
npm install -g webpack
若要指定为4.42.1版本，则执行
npm install -g webpack@4.42.1

• webpack-cli

webpack-cli -v

3.3.11
如果提示 webpack-cli : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。 则需要先安装
npm install -g webpack-cli

若要指定为 3.3.11版本，则执行
npm install -g webpack-cli@3.3.11

使用vue-cli脚手架构建项目

查看是否已安装vue-cli脚手架

• vue

vue -V

2.9.6
如果提示 vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。 则需先安装

全局安装vue-cli脚手架

制定安装版本为2.9.6，确保执行vue -V查看版本为2.9.6

npm install -g vue-cli@2.9.6

再执行vue -V确定已安装成功

创建vue2项目

使用vue-cli脚手架搭建项目。以本项目vue2-webpack-test为例

vue init webpack vue2-webpack-test

如果一直提示报错 * vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443*
可以尝试如下方法

1. 查看是否更换npm为镜像源

npm config get registry

更换为淘宝镜像源

npm config set registry https://registry.npm.taobao.org

再重新执行
vue init webpack your-project-name

2. 下载webpack包至本地进行使用
   访问webpack的Github地址下载ZIP压缩包
   解压到一个指定的文件夹处（在本项目解压至 .\webpack-develop\文件夹下
   执行命令vue init your-webpack-directory-path your-project-name

vue init .\webpack-develop\webpack-develop vue2-webpack-test

3. 出现如下交互内容，说明vue初始化成功
   Project name (vue2-webpack-test)
   输入 vue2-webpack-test
   Project description (A Vue.js project)
   Author
   Vue build
   这几项可直接回车跳过
   Install vue-router? (Y/n)
   输入 y
   Use ESLint to lint your code? (Y/n)
   输入 n
   Set up unit tests (Y/n)
   输入 n
   Setup e2e tests with Nightwatch? (Y/n)
   输入 n
   Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
   默认箭头在 Yes, use NPM 上，直接点击回车即可

运行项目

1. 切换到搭建好vue2+webpack框架的文件夹内

cd vue2-webpack-test

2. 执行命令启动项目

npm run dev