vue.js环境配置到项目创建与第一个示例

落日映苍穹つ 2022-03-27 09:36 159阅读 0赞

## 一、环境搭建 ##

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

首先，需要安装node.js。这个在win10系统中是自带的，可以使用命令行`node -v`查看版本。  
正常来说，为了使用vue.js，我们需要下载更高版本的node.js。  
官网地址：[https://nodejs.org/en/][https_nodejs.org_en]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70]  
一般建议选择左侧LTS版本下载。下载完成后安装，使其覆盖原来的node.js即可。注意在选择环境时建议选择最后一项（同时安装node.js和npm的）。

附上一个详细的node.js安装教程链接：[https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html][https_jingyan.baidu.com_article_48b37f8dd141b41a646488bc.html]

### 1.2 安装vue ###

此处我们使用vue-cli进行安装，它将包含vue（也就是不需要再进行vue的安装操作）  
安装命令：`npm install -g vue-cli`

最新的vue-cli 3安装命令：`npm install -g @vue/cli`  
建议不要安装Vue CLI 3，我第一次安装完成后发现无论是使用命令行还是使用WebStorm都无法创建项目。

--------------------

## 二、创建项目 ##

推荐两种vue项目创建方式：命令行或者WebStorm

### 2.1 使用命令行创建vue.js项目 ###

使用命令`vue init webpack project_name`来快速创建一个vue项目。  
下面为命令执行过程，其中的各项配置根据需要自行指定即可：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 1]

使用WebStorm打开该项目：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 2]

### 2.2 使用WebStorm创建vue.js项目 ###

也可以使用WebStorm创建vue项目（据说是目前对前端开发者支持最好的开发软件了，jetbrains大法好啊）。下面介绍一下具体流程：  
首先选择创建新项目：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 3]

然后选择vue.js，输入项目名称，自动匹配node.js，vue-cli的地址（所以必须还要先配置node和vue-cli的环境）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 4]

下面一路next，与命令行中的可选项基本类似，顺序操作即可。

--------------------

## 三、运行与展示 ##

项目创建完毕后，我们来试着运行一下：  
首先点击图示按钮添加启动配置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 5]

选择npm，选择命令run，脚本为dev：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 6]

点击右上角启动按钮，直到控制台如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 7]

我们打开浏览器，访问控制台里面给出的地址：`http://localhost:8082`，可以看到如下界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 8]

这个图片就对应着我们项目components文件夹下默认的HelloWorld.vue界面。项目创建成功后呢，我们可以在此基础上添加自己想要的界面、组件等等。

--------------------

好了，有关如何创建一个独立的vue项目的介绍就到此为止啦。  
最近正在学习vue，所以之后应该会出一连续的较为基础的教程或者说笔记。希望大家喜欢！

--------------------

## 交流 ##

如果大家有兴趣一起学习技术，一起交流讨论，可以加入QQ群：701365388，目前基本没什么人气啦(ฅ´ω\`ฅ)，不过有问题群主会努力解答的。嘿嘿٩(ˊᗜˋ\*)و。

If you have any problem or ideas about my blogs or projects, you can contact me using any ways in the following list →\_→:

*  Personal Site: [http://www.eknown.cn][http_www.eknown.cn]
 *  Github: [https://github.com/laolunsi][https_github.com_laolunsi]
 *  CSDN: [https://blog.csdn.net/qq\_28379809][https_blog.csdn.net_qq_28379809]

[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70]: /images/20220327/a74777b6e17e4e77827ad9a8b9551101.png
[https_jingyan.baidu.com_article_48b37f8dd141b41a646488bc.html]: https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 1]: /images/20220327/8ed152fa2df147ceb2191e606c77e1f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 2]: /images/20220327/507d82cb390e49e5a66a1bc0df6cf7b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 3]: /images/20220327/3dedd4aae29b4df3bab54049aea775a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 4]: /images/20220327/712d790ac10b46e5b26978b3881575be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 5]: /images/20220327/c7631dbebfd64cbdb1bf1deb23c36dbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 6]: /images/20220327/30b3199ad160437ba14e5e26aed047bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 7]: /images/20220327/9c64631679954257acc015764b75343a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 8]: /images/20220327/220d69dc273b475b9c61d502c22cbaa3.png
[http_www.eknown.cn]: http://www.eknown.cn
[https_github.com_laolunsi]: https://github.com/laolunsi
[https_blog.csdn.net_qq_28379809]: https://blog.csdn.net/qq_28379809