详解Vue安装与配置(2023)

川长思鸟来 2023-09-24 22:36 23阅读 0赞

### 文章目录 ###

*   *  一、官网下载node.js
     *  二、安装Node.js
     *  三、环境配置
     *  四、idea导入vue项目
     *  五、IDEA添加Vue.js插件
     *  六、浏览器添加Vue.js devtools插件
     *   *  1. 火狐浏览器：
         *  2. Chrome浏览器：
     *  七、设置指定浏览器打开vue项目

## 一、官网下载node.js ##

Vue是前端开发框架。搭建框架，首先要搭建环境。搭建Vue的环境工具：node.js（JavaScript的运行环境），然后再用nodejs里面的npm（包管理和分发工具）来安装依赖包。Node.js 是—个基于Chrome V8引擎的JavaScript运行时环境，npm是Node.js的包管理工具(package manager)。

下载对应你系统的Node.js版本:[ https://nodejs.org/en/download/][https_nodejs.org_en_download]  
![在这里插入图片描述][e7cb109d35cd4015845aaeec083321db.png]

![在这里插入图片描述][88b0ad1a869b48fb9214d52a8aaf92ea.png]  
其他的版本需下划，找到 `Previous Releases`  
![在这里插入图片描述][f490df5c3fbf49ac9334137ec99aa3d1.png]

再自行找到自己想要的版本下载：

![在这里插入图片描述][39652cbcc0e8434e997ff307db661b7e.png]  
![在这里插入图片描述][63b92a3f061f48f2ba57764aa1aedf40.png]

![在这里插入图片描述][50c593ce6eb745cabfebe5dc37202c01.png]

## 二、安装Node.js ##

（1）下载完成后，双击“node-v16.5.0-x64.msi”，开始安装Node.js

![在这里插入图片描述][b56be08531614a4fb998d814e3f2a2a2.png]

（2）点击【Next】按钮，接受协议，再点击【Next】按钮

![在这里插入图片描述][09e0af088974467683947e3ef67313be.png]

（3）点击【Next】按钮，更换安装目录

![在这里插入图片描述][31cec902fc8046af8504d292a8b2e3f1.png]

（4）更换后，点击【Next】按钮

![在这里插入图片描述][bf07de5d7b164c35a417db5e2e8d42ed.png]

（5）点击【Next】按钮

![在这里插入图片描述][697964e63a9347b88d62499e7b8b6d40.png]

（6）点击【Next】按钮

![在这里插入图片描述][ec202e3d414344a79930283ac61794ae.png]

（7）点击【Install】按钮

![在这里插入图片描述][3eb8b02fe3824fb09846c59ce89729a1.png]

（8）最后点击【Finish】按钮

![在这里插入图片描述][e220d54006f844db8836aef28bc06402.png]

## 三、环境配置 ##

这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express \[-g\] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会默认将安装的模块安装到 **C:\\Users\\用户名\\AppData\\Roaming\\npm** 路径中，占C盘空间。  
例如：我希望将**全模块所在路径和缓存路径放在我node.js安装的文件夹中**，则在我安装的文件夹【E:\\configurations\\Node-v16.5.0】下创建两个文件夹node\_global 及 node\_cache，如下图：

![在这里插入图片描述][6fa199ea6add4ee18d9d5eaf62623629.png]

创建完两个空文件夹之后，打开cmd命令窗口，分别输入以下命令，按Enter确定

注意：以下路径要根据自己nodejs文件夹的位置自行设置
    npm config set prefix "E:\configurations\Node-v16.5.0\node_global"
    npm config set cache "E:\configurations\Node-v16.5.0\node_cache"

![在这里插入图片描述][7c58f3328f9347e9b03d83d4329cbdad.png]

接下来设置环境变量，“此电脑”-右键-“系统”-“高级系统设置”-“高级”-“环境变量”

![在这里插入图片描述][af3e760c1d61428194af9238ba3c371d.png]

进入环境变量对话框，在【系统变量】下新建【NODE\_PATH】，输入【E:\\configurations\\Node-v16.5.0\\node\_global\\node\_modules】

![在这里插入图片描述][4674cf6d4edc4f43b89b5918c6db7e33.png]

将【用户变量】下的【Path】中默认的C:\\Users\\用户名\\AppData\\Roaming\\npm修改为【E:\\configurations\\Node-v16.5.0\\node\_global】

![在这里插入图片描述][7a4b53c2eb844ad0a2dd9852377522eb.png]

![在这里插入图片描述][b01fe6dfa5df42f49928eba3dce329fb.png]

配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，  
输入如下命令进行模块的全局安装：

npm install express -g 注：**-g是全局安装的意思**

若报错：

npm ERR! code EPERM
    npm ERR! syscall mkdir
    npm ERR! path E:\configurations\Node-v16.5.0\node_cache\_cacache
    npm ERR! errno EPERM
    .....................
    npm ERR! If you believe this might be a permissions issue, please double-check the
    npm ERR! permissions of the file and its containing directories, or try running
    npm ERR! the command again as root/Administrator.

![在这里插入图片描述][8404111c0a6d48088214ae34c82c87e1.png]  
![在这里插入图片描述][3b1d05360a9c4410bd17aee912880be5.png]

说明权限不够，方法一：找到node目录，右键属性 => 安全 => 设置users用户完全控制权限，点击【应用】后再点击【确定】

![在这里插入图片描述][88b82a193c7a443db4bc9605235fa84d.png]

方法二：以管理员身份运行命令提示符

![在这里插入图片描述][5a79056a3cb44f2a9efe4d9d8fe387af.jpeg_pic_center]

![在这里插入图片描述][e66bb40e13444385848b7ecabe2fabef.png]

进入 E:\\configurations\\Node-v16.5.0\\node\_global\\node\_modules 后，发现安装成功

![在这里插入图片描述][652e41ee2d61402691c9e9988349ed29.png]

安装淘宝镜像cnpm  
电脑打开cmd, 输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像

通过npm安装模块时都是去国外的镜像下载的，有的时候由于网络原因会导致安装模块失败，好在阿里有团队维护国内镜像:http://npm.taobao.org/ 上面有使用说明

![在这里插入图片描述][3660e887314b4a49b0f7f48d9253d844.png]

输入 npm config get registry 检查是否安装成功

![在这里插入图片描述][b12a3fbaa36344418f788938e1b4cf9c.png]

或者进入 **E:\\configurations\\Node-v16.5.0\\node\_global\\node\_modules** ，发现安装成功  
![在这里插入图片描述][80e9084ad56a4c96b14b30d4c5670377.png]

除了淘宝镜像，也可以用yarn，安装地址：[https://yarnpkg.com/zh-Hans/docs/install][https_yarnpkg.com_zh-Hans_docs_install]

输入 npm install -g @vue/cli 安装脚手架

![在这里插入图片描述][408454ec4888409ab546e258b91b18b4.png]

然后分别输入 npm -v 、 node -v 和 vue -V（这里大写的V）/ vue --version 查看相应的版本号

![在这里插入图片描述][819b7b985ee241129a68b39c7295b67b.png]

在电脑上随便位置创建好你需要放Vue项目的文件夹

创建项目文档: [https://cli.vuejs.org/zh/guide/creating-a-project.html\#vue-create][https_cli.vuejs.org_zh_guide_creating-a-project.html_vue-create]

然后在cmd上进入该目录，使用 vue create xxxx创建vue项目（xxxx是你的项目名称，名称不可用大写字母）  
![在这里插入图片描述][4f14d7d44d944e718cef07e16f1d9e7c.png]

然后进入下面的选择，Enter是确认选择，上下键是换选择

![在这里插入图片描述][7ac319cfa9be460c82a8eeee840ae236.png]

我选择了第三个（Manually select features），下一张的 `*`标记是按空格来进行选择或者取消选择，学习阶段的同学建议选择 `Babel` 和 `Progressive Web App (PWA) Support` (只把第一和第三项加 \* 选中)，并把 `Linter / Formatter` 取消选中（按空格取消 \* 号），Linter / Formatter 是代码规范化，对代码规范要求更高

![在这里插入图片描述][b89d3e7e87834a1d94a345dc7bb50054.png]

选择 vue 3.x 版本

![在这里插入图片描述][fcdac8adf2044330ac73fae3390f5609.png]  
![在这里插入图片描述][64c124f7e96e4599afa2d7fa3cdb201c.png]  
![在这里插入图片描述][002411b2834949aabb55a023f8be9f85.png]

![在这里插入图片描述][e5abbfe83d5f4551ab0df32c3e99e4cc.png]  
![在这里插入图片描述][f4eccea85e2641d3a4799d7483b40e4b.png]  
![在这里插入图片描述][84d2a49138444290a8524cb695f59cd2.png]

创建好后执行蓝色提示命令：

1.  先入目录： cd test
2.  再运行：npm run serve

![在这里插入图片描述][373f122a6ca24bde93fa091894e5da0d.png]

等待运行好后，会出现一个地址，复制到浏览器打开，至此vue项目创建成功

![在这里插入图片描述][c0d91711077944eda18dd9b6b94b884e.png]

![在这里插入图片描述][5a39b6ed7a6147afbb8d127badf8e2e4.png]

## 四、idea导入vue项目 ##

打开idea，用idea导入我们刚才创建的vue项目

![在这里插入图片描述][bcda859afedd4dcfb3b7a88fd267907c.png]  
![在这里插入图片描述][39d13f4f1c764230871e49c3f8e79cb9.png]  
![在这里插入图片描述][ba283713de4d41f1bfea4ab46d16fc73.png]

![在这里插入图片描述][19558591ede240cebbaa1bf16e78ed5a.png]

![在这里插入图片描述][7d14193779be483e81755f1991aa0057.png]  
![在这里插入图片描述][c95225e66af04e1d90ae0c4f543bd778.png]  
![在这里插入图片描述][99780e0acfb04d738dbeac89b836a063.png]

项目导入成功：

![在这里插入图片描述][0d4fe36502084098867672fd4e378a22.png]

## 五、IDEA添加Vue.js插件 ##

点击 左上角的file，再点击settings  
![在这里插入图片描述][d9b85aa7047341048d2d508f1a8a454c.png]

然后选择plugins在搜索框，搜Vue.js进行安装插件![在这里插入图片描述][cfc1cd98031541d58812739265e12643.png]

## 六、浏览器添加Vue.js devtools插件 ##

### 1. 火狐浏览器： ###

进入 `设置` => `扩展和主题` => `寻找更多附加组件` => `输入vue.js`  
![在这里插入图片描述][f61d14b5707d4e8fb250752fcc2eb467.png]

点击进入后，选择 `添加到Firefox`

![在这里插入图片描述][b7f45cd66c4349468b040c94f8f02b2c.png]

### 2. Chrome浏览器： ###

2.1 用Chrome谷歌浏览器访问极简插件  
地址：[https://chrome.zzzmh.cn/\#/index][https_chrome.zzzmh.cn_index]

![在这里插入图片描述][5b57ebd5f5a941bb9fb6d174545c3453.png]

2.2 右上角搜索框搜索vue，选好对应插件后下载

![在这里插入图片描述][cc0e62fb75394e808e91cc8a6536aef8.png]  
![在这里插入图片描述][6e73fac3ec0249beb1bfc2f3ba903599.png]

2.3 在本地文件夹中解压刚刚下载的插件，进入解压文件夹后找到 `.crx文件`

![在这里插入图片描述][526fb97c3ab148c092cb3d66c4dc74a3.png]

![在这里插入图片描述][3e57d1889fa84e8d9f97048866119533.png]

2.4 打开谷歌浏览器– `更多工具` – `拓展程序`

![在这里插入图片描述][7167e3b49a1949f6bf61aae0e02a907e.png]

2.5 将解压的文件夹直接拖到2.4中 `拓展程序` 页面或者点击 `加载已解压的扩展程序` 再导入

![在这里插入图片描述][f88105a898304d2eb6e3ae16c110a8a0.png]

2.6 安装成功  
使用chrome浏览器访问vue文件，按 `F12` 进入开发者模式后，发现可以使用vueDevTools调试工具进行调试。

![在这里插入图片描述][65badfbd36394213a13afc110296f15b.png]

## 七、设置指定浏览器打开vue项目 ##

vue项目一般默认用系统的默认浏览器打开，  
自行指定浏览器的方法：vue.config.js中的devServer下增加open配置

如指定谷歌浏览器打开，如下所示（无需在启动命令加–open）

const {
         defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
        
      transpileDependencies: true,
      devServer: {
        
        host: '127.0.0.1',
        port:'8087',
        open: {
        app:{
        name:'chrome'}},
      },
    
    })

![在这里插入图片描述][c7f3e97c6ad74e06a31de75a1b95bbce.png]

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[e7cb109d35cd4015845aaeec083321db.png]: https://img-blog.csdnimg.cn/e7cb109d35cd4015845aaeec083321db.png
[88b0ad1a869b48fb9214d52a8aaf92ea.png]: https://img-blog.csdnimg.cn/88b0ad1a869b48fb9214d52a8aaf92ea.png
[f490df5c3fbf49ac9334137ec99aa3d1.png]: https://img-blog.csdnimg.cn/f490df5c3fbf49ac9334137ec99aa3d1.png
[39652cbcc0e8434e997ff307db661b7e.png]: https://img-blog.csdnimg.cn/39652cbcc0e8434e997ff307db661b7e.png
[63b92a3f061f48f2ba57764aa1aedf40.png]: https://img-blog.csdnimg.cn/63b92a3f061f48f2ba57764aa1aedf40.png
[50c593ce6eb745cabfebe5dc37202c01.png]: https://img-blog.csdnimg.cn/50c593ce6eb745cabfebe5dc37202c01.png
[b56be08531614a4fb998d814e3f2a2a2.png]: https://img-blog.csdnimg.cn/b56be08531614a4fb998d814e3f2a2a2.png
[09e0af088974467683947e3ef67313be.png]: https://img-blog.csdnimg.cn/09e0af088974467683947e3ef67313be.png
[31cec902fc8046af8504d292a8b2e3f1.png]: https://img-blog.csdnimg.cn/31cec902fc8046af8504d292a8b2e3f1.png
[bf07de5d7b164c35a417db5e2e8d42ed.png]: https://img-blog.csdnimg.cn/bf07de5d7b164c35a417db5e2e8d42ed.png
[697964e63a9347b88d62499e7b8b6d40.png]: https://img-blog.csdnimg.cn/697964e63a9347b88d62499e7b8b6d40.png
[ec202e3d414344a79930283ac61794ae.png]: https://img-blog.csdnimg.cn/ec202e3d414344a79930283ac61794ae.png
[3eb8b02fe3824fb09846c59ce89729a1.png]: https://img-blog.csdnimg.cn/3eb8b02fe3824fb09846c59ce89729a1.png
[e220d54006f844db8836aef28bc06402.png]: https://img-blog.csdnimg.cn/e220d54006f844db8836aef28bc06402.png
[6fa199ea6add4ee18d9d5eaf62623629.png]: https://img-blog.csdnimg.cn/6fa199ea6add4ee18d9d5eaf62623629.png
[7c58f3328f9347e9b03d83d4329cbdad.png]: https://img-blog.csdnimg.cn/7c58f3328f9347e9b03d83d4329cbdad.png
[af3e760c1d61428194af9238ba3c371d.png]: https://img-blog.csdnimg.cn/af3e760c1d61428194af9238ba3c371d.png
[4674cf6d4edc4f43b89b5918c6db7e33.png]: https://img-blog.csdnimg.cn/4674cf6d4edc4f43b89b5918c6db7e33.png
[7a4b53c2eb844ad0a2dd9852377522eb.png]: https://img-blog.csdnimg.cn/7a4b53c2eb844ad0a2dd9852377522eb.png
[b01fe6dfa5df42f49928eba3dce329fb.png]: https://img-blog.csdnimg.cn/b01fe6dfa5df42f49928eba3dce329fb.png
[8404111c0a6d48088214ae34c82c87e1.png]: https://img-blog.csdnimg.cn/8404111c0a6d48088214ae34c82c87e1.png
[3b1d05360a9c4410bd17aee912880be5.png]: https://img-blog.csdnimg.cn/3b1d05360a9c4410bd17aee912880be5.png
[88b82a193c7a443db4bc9605235fa84d.png]: https://img-blog.csdnimg.cn/88b82a193c7a443db4bc9605235fa84d.png
[5a79056a3cb44f2a9efe4d9d8fe387af.jpeg_pic_center]: https://img-blog.csdnimg.cn/5a79056a3cb44f2a9efe4d9d8fe387af.jpeg#pic_center
[e66bb40e13444385848b7ecabe2fabef.png]: https://img-blog.csdnimg.cn/e66bb40e13444385848b7ecabe2fabef.png
[652e41ee2d61402691c9e9988349ed29.png]: https://img-blog.csdnimg.cn/652e41ee2d61402691c9e9988349ed29.png
[3660e887314b4a49b0f7f48d9253d844.png]: https://img-blog.csdnimg.cn/3660e887314b4a49b0f7f48d9253d844.png
[b12a3fbaa36344418f788938e1b4cf9c.png]: https://img-blog.csdnimg.cn/b12a3fbaa36344418f788938e1b4cf9c.png
[80e9084ad56a4c96b14b30d4c5670377.png]: https://img-blog.csdnimg.cn/80e9084ad56a4c96b14b30d4c5670377.png
[https_yarnpkg.com_zh-Hans_docs_install]: https://yarnpkg.com/zh-Hans/docs/install
[408454ec4888409ab546e258b91b18b4.png]: https://img-blog.csdnimg.cn/408454ec4888409ab546e258b91b18b4.png
[819b7b985ee241129a68b39c7295b67b.png]: https://img-blog.csdnimg.cn/819b7b985ee241129a68b39c7295b67b.png
[https_cli.vuejs.org_zh_guide_creating-a-project.html_vue-create]: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
[4f14d7d44d944e718cef07e16f1d9e7c.png]: https://img-blog.csdnimg.cn/4f14d7d44d944e718cef07e16f1d9e7c.png
[7ac319cfa9be460c82a8eeee840ae236.png]: https://img-blog.csdnimg.cn/7ac319cfa9be460c82a8eeee840ae236.png
[b89d3e7e87834a1d94a345dc7bb50054.png]: https://img-blog.csdnimg.cn/b89d3e7e87834a1d94a345dc7bb50054.png
[fcdac8adf2044330ac73fae3390f5609.png]: https://img-blog.csdnimg.cn/fcdac8adf2044330ac73fae3390f5609.png
[64c124f7e96e4599afa2d7fa3cdb201c.png]: https://img-blog.csdnimg.cn/64c124f7e96e4599afa2d7fa3cdb201c.png
[002411b2834949aabb55a023f8be9f85.png]: https://img-blog.csdnimg.cn/002411b2834949aabb55a023f8be9f85.png
[e5abbfe83d5f4551ab0df32c3e99e4cc.png]: https://img-blog.csdnimg.cn/e5abbfe83d5f4551ab0df32c3e99e4cc.png
[f4eccea85e2641d3a4799d7483b40e4b.png]: https://img-blog.csdnimg.cn/f4eccea85e2641d3a4799d7483b40e4b.png
[84d2a49138444290a8524cb695f59cd2.png]: https://img-blog.csdnimg.cn/84d2a49138444290a8524cb695f59cd2.png
[373f122a6ca24bde93fa091894e5da0d.png]: https://img-blog.csdnimg.cn/373f122a6ca24bde93fa091894e5da0d.png
[c0d91711077944eda18dd9b6b94b884e.png]: https://img-blog.csdnimg.cn/c0d91711077944eda18dd9b6b94b884e.png
[5a39b6ed7a6147afbb8d127badf8e2e4.png]: https://img-blog.csdnimg.cn/5a39b6ed7a6147afbb8d127badf8e2e4.png
[bcda859afedd4dcfb3b7a88fd267907c.png]: https://img-blog.csdnimg.cn/bcda859afedd4dcfb3b7a88fd267907c.png
[39d13f4f1c764230871e49c3f8e79cb9.png]: https://img-blog.csdnimg.cn/39d13f4f1c764230871e49c3f8e79cb9.png
[ba283713de4d41f1bfea4ab46d16fc73.png]: https://img-blog.csdnimg.cn/ba283713de4d41f1bfea4ab46d16fc73.png
[19558591ede240cebbaa1bf16e78ed5a.png]: https://img-blog.csdnimg.cn/19558591ede240cebbaa1bf16e78ed5a.png
[7d14193779be483e81755f1991aa0057.png]: https://img-blog.csdnimg.cn/7d14193779be483e81755f1991aa0057.png
[c95225e66af04e1d90ae0c4f543bd778.png]: https://img-blog.csdnimg.cn/c95225e66af04e1d90ae0c4f543bd778.png
[99780e0acfb04d738dbeac89b836a063.png]: https://img-blog.csdnimg.cn/99780e0acfb04d738dbeac89b836a063.png
[0d4fe36502084098867672fd4e378a22.png]: https://img-blog.csdnimg.cn/0d4fe36502084098867672fd4e378a22.png
[d9b85aa7047341048d2d508f1a8a454c.png]: https://img-blog.csdnimg.cn/d9b85aa7047341048d2d508f1a8a454c.png
[cfc1cd98031541d58812739265e12643.png]: https://img-blog.csdnimg.cn/cfc1cd98031541d58812739265e12643.png
[f61d14b5707d4e8fb250752fcc2eb467.png]: https://img-blog.csdnimg.cn/f61d14b5707d4e8fb250752fcc2eb467.png
[b7f45cd66c4349468b040c94f8f02b2c.png]: https://img-blog.csdnimg.cn/b7f45cd66c4349468b040c94f8f02b2c.png
[https_chrome.zzzmh.cn_index]: https://chrome.zzzmh.cn/#/index
[5b57ebd5f5a941bb9fb6d174545c3453.png]: https://img-blog.csdnimg.cn/5b57ebd5f5a941bb9fb6d174545c3453.png
[cc0e62fb75394e808e91cc8a6536aef8.png]: https://img-blog.csdnimg.cn/cc0e62fb75394e808e91cc8a6536aef8.png
[6e73fac3ec0249beb1bfc2f3ba903599.png]: https://img-blog.csdnimg.cn/6e73fac3ec0249beb1bfc2f3ba903599.png
[526fb97c3ab148c092cb3d66c4dc74a3.png]: https://img-blog.csdnimg.cn/526fb97c3ab148c092cb3d66c4dc74a3.png
[3e57d1889fa84e8d9f97048866119533.png]: https://img-blog.csdnimg.cn/3e57d1889fa84e8d9f97048866119533.png
[7167e3b49a1949f6bf61aae0e02a907e.png]: https://img-blog.csdnimg.cn/7167e3b49a1949f6bf61aae0e02a907e.png
[f88105a898304d2eb6e3ae16c110a8a0.png]: https://img-blog.csdnimg.cn/f88105a898304d2eb6e3ae16c110a8a0.png
[65badfbd36394213a13afc110296f15b.png]: https://img-blog.csdnimg.cn/65badfbd36394213a13afc110296f15b.png
[c7f3e97c6ad74e06a31de75a1b95bbce.png]: https://img-blog.csdnimg.cn/c7f3e97c6ad74e06a31de75a1b95bbce.png