0.1、Vue-配置开发环境

拼搏现实的明天。 2023-01-11 13:09 96阅读 0赞

### 文章目录 ###

*   *   *  前言
         *  一图胜千言
         *  Vue 开发环境搭建
         *   *  node.js 安装
             *   *  node 官网
             *  Windows 环境
             *  Mac 环境
             *   *  步骤
                 *  可能遇到的问题和解决办法
         *  使用命令行生成一个 Vue 项目
         *  查看环境的版本
         *   *  node 版本查看
             *  vue-cli 版本查看
             *   *  Vue-cli 配置官方说明

### 前言 ###

> 以下内容来自 [Vue官网][Vue]  
> Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

### 一图胜千言 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70]

### Vue 开发环境搭建 ###

*  主要是 安装 node.js、vue-router、vue-cli
 *  介绍 Vue 以及相关概念的[文章][Link 1]

概括来说，vue依赖vue-cli这个脚手架，而vue-cli是对webpack的封装，webpack专门用于静态js资源管理和打包，其依赖node.js，node.js是一个js 的运行环境。其他的就是vue的具体场景介绍了，比如element是前端样式框架，Axios 用于发送网络请求。

#### node.js 安装 ####

windows7 需要安装比较早的版本，可以直接安装 [node-v12.18.4-x64.msi][]

##### node 官网 #####

<table> 
 <thead> 
  <tr> 
   <th>类别</th> 
   <th>地址</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>最新版本</td> 
   <td><a href="https://www.cnblogs.com/zhaomeizi/p/8483597.html" rel="nofollow">https://www.cnblogs.com/zhaomeizi/p/8483597.html</a></td> 
  </tr> 
  <tr> 
   <td>历史版本</td> 
   <td><a href="https://nodejs.org/en/download/releases/" rel="nofollow">https://nodejs.org/en/download/releases/</a></td> 
  </tr> 
 </tbody> 
</table>

#### Windows 环境 ####

发现一篇写的极好的文章: [https://www.cnblogs.com/jianguo221/p/11487532.html][https_www.cnblogs.com_jianguo221_p_11487532.html]

#### Mac 环境 ####

##### 步骤 #####

https://blog.csdn.net/chenlongjs/article/details/104962275

##### 可能遇到的问题和解决办法 #####

*  Mac 目录权限

sudo chown -R 具体Mac用户名 /usr/local/

*  vue-cli · connect ECONNREFUSED 13.250.168.23:443

https://blog.csdn.net/why_1639946449/article/details/109674041

### 使用命令行生成一个 Vue 项目 ###

vue init webpack \[项目名称\]  
比如  
vue init webpack vueblog

### 查看环境的版本 ###

#### node 版本查看 ####

> node -v  
> v12.18.4

#### vue-cli 版本查看 ####

> vue -V  
> 2.9.6

##### Vue-cli 配置官方说明 #####

[Vue-cli 官方配置说明][Vue-cli]

[Vue]: https://cn.vuejs.org/v2/guide/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70]: /images/20221119/2f52c0b2f9f44f9cb104c2108dbe148b.png
[Link 1]: https://zhuanlan.zhihu.com/p/163267718
[node-v12.18.4-x64.msi]: https://nodejs.org/download/release/v12.18.4/node-v12.18.4-x64.msi
[https_www.cnblogs.com_jianguo221_p_11487532.html]: https://www.cnblogs.com/jianguo221/p/11487532.html
[Vue-cli]: https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE