IntelliJ IDEA使用 vue-cli 创建Vue项目

àì夳堔傛蜴生んèń 2022-12-27 02:30 113阅读 0赞

# 步骤 #

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

## 创建的名字自己定义 ##

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

## 你会发现什么都没有,这就对了,接下来 `右键`自己创建的`项目或者模块`–> `Open in Terminal` ##

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

## 点击后会打开控制台,并且是你项目或者模块的文件夹下: ##

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

## 输入命令: ##

vue init webpack

**提示:oject in current directory? (Y/n)** 输入 :y  
**提示:? Project name** 这里就是作者名称,输入自己的或者直接回车(有可能不支持中文)  
**提示:Project description (A Vue.js project)** 回车  
**提示:? Author (***)*\* 回车  
**提示:**  
![在这里插入图片描述][20201207204058119.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 3]  
idea会在右下角提示:选择 `Run ''npm install''` 让其下载即可  
![在这里插入图片描述][20201207204530718.png]  
下载的时间还是不短的,下载完成后如图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 4]  
提示了很多 WARN 也没关系,只要能运行如下操作就是完成了![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 6]![在这里插入图片描述][20201207205747578.png]出现如下图就是成功了:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 7]

## 如果没有出现idea的提示 ##

就继续在控制台输入:

npm install

其实都一样的

# 这就完成vue-cli的基本Vue项目搭建 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70]: /images/20221120/89e76cec861c43fa8883772ece9a846b.png
[20201207202844424.png]: /images/20221120/16ae227d9e4640f3ba88e78bea52fc29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 1]: /images/20221120/314b4a6ad00c493fba0eaac54740f4b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 2]: /images/20221120/855d750cfe044e8d8e41077b25ef19a4.png
[20201207204058119.png]: /images/20221120/9acb79b32aaa4c7fa66f8038f431f37b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 3]: /images/20221120/1d2d63871dc34984891e97722e1e8fa1.png
[20201207204530718.png]: /images/20221120/1547d5ed63fe47d8ad399f52de4d2f68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 4]: /images/20221120/919f46cfe407401b820488bf8856a2f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 5]: /images/20221120/bf3158e140af497ab77d71672eb0ddcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201207205315562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw==,size_16,color_FFFFFF,t_70
[20201207205747578.png]: /images/20221120/813d23e75b6346ee931f32f59fe9caed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201207205806313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NzAyMw==,size_16,color_FFFFFF,t_70