记录我配置Vue的过程

1.安装node ，下载后直接根据提示安装

 2.打开dos窗口，验证是否安装成功

3.修改默认的下载路径，使用淘宝镜像的方式

第一种方式 

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

 配置后可以根据 npm config get registry或 npm config list 命令查看npm下载源是否配置成功

 

或者换一种

第二种方式

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

 验证方式变成cnpm config get registry 或 cnpm config list如图所示

4.安装Vue（以第一种为例）

npm install vue -g

其中-g是全局安装，指安装到global全局目录去

查看安装信息

npm info vue 
 

查看当前vue版本，2022.3.12

npm view vue version

 

 

5.安装webpack模板

在命令行中运行命令 npm install webpack -g 

webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，
所以还需要安装webpack-cli：

使用命令npm install --global webpack-cli，

使用npm install webpack-dev-server安装运行时

安装成功后可使用webpack -v查看版本号。

6.安装脚手架vue-cli 2.x

npm install vue-cli -g

 

验证是否正确vue --version 

（补充）2022.3.12

目前官方脚手架已经更新至5.版本 

要安装指定版本的cli

下面是  vue-cli2.x.x 版本及以下的卸载

npm uninstall vue-cli -g

 卸载 vue-cli3.x.x 版本及以上包括4.x和5.x等版本的卸载

npm uninstall -g @vue/cli

 查看所有可用版本，（只包括2.x及以下版本）

 npm view vue-cli versions --json

查看所有可用版本，（只包括3.x以上版本） 

 npm view @vue/cli versions --json

 安装最新版本

npm install -g @vue/cli

安装指定版本的cli适用于2.x以及下

npm install -g vue-cli@2.x.x 

 安装指定版本的cli用于3.x及以上

3.0 级以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli

npm install -g @vue/cli@3.9.3
 

 7.建立项目

在d盘建立文件夹vuedemos

 进入文件夹

使用

vue init webpack meproject 

这里如果提示需要安装一个插件就根据提示安装即可.2022.3.12 

建立一个项目，等待一段时间

 开始配置一些选项

 具体说明

这里可以选第三个

最后一个，安装依赖选择npm 

 等待一会儿

完成 

 8.在VScode中打开项目

进入文件夹打开index配置文件

 这里可以修改端口，防止冲突

另外还将 build 的路径前缀修改为 ’ ./ '（原本为 ’ / '），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ’ / ’ 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。 

 

 9.使用npm run dev查看效果

npm run dev

打开浏览器，进入这个端口

 

Ctrl+c选择Y即可停止服务