使用webstorm2020创建一个带有项目模板的Vue项目

小咪咪 2023-10-08 12:27 15阅读 0赞

> 为了响应时代的召唤，最近在看关于vue的东西。我想使用WebStorm创建一个简单的带有模板的vue项目。

## 一、前提 ##

在创建vue 项目之前你必须要确保你已经安装了以下东西：  
1.webstorm（我使用的是2020版的）  
2.node.js（v12.18.3）  
3.cnmp（cnpm@6.1.1）  
4.vue（2.9.6）  
5.webpack（4.44.1）  
6.git  
以上这些东西可以直接去百度，都没有什么坑，很容易就安装成功了。

## 二、创建vue项目 ##

当你完成了“前提”中的任务，你就可以打开webstorm创建vue项目了。  
创建步骤如下：  
（1）打开webstorm->file->project->vue.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 1]我们没有template这个选项，所以我们不使用webstorm工具去创建vue项目我们使用git！  
（2）使用git创建带有模板的vue项目  
**第一步**：在你webstorm编译工具的**工作空间**中右键打开git（这个工作空间说白了就是你存放项目的目录）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 2]  
**第二步**：在git中执行创建vue的命令  
命令：`vue init webpack [你项目的名称]`  
一定要注意：你项目的名称不能存在大写的字母！！！

***如果在初始化过程中遇到问题，请跳转到最后！！！***

**第三步**：填写信息  
前面几个提示信息不用管，直接回车就行

? Project name (myprojectvue02)
    ? Project name myprojectvue02
    ? Project description (A Vue.js project)
    ? Project description A Vue.js project
    ? Author (xxx <xxxxxxxx@qq.com>)
    ? Author (xxx <xxxxxxxxx@qq.com>
    ? Vue build (Use arrow keys)
    ? Vue build standalone

? Install vue-router? (Y/n)//询问你是否安装vue的路由

vue路由，我选择的是no

Use ESLint to lint your code? (Y/n)//询问你是否使用ESlint规范，其实就是自动格式化代码的东西

是否使用ESLint管理代码，我选择的是no

Set up unit tests (Y/n)

是否设置单元测试，这个需要。选择yes。紧接着直接回车。

Setup e2e tests with Nightwatch?

是否设置单元测试和e2e测试。我选择的是no。紧接着直接回车。

? Should we run `npm install` for you after the project has been created? (recom
    mended) (Use arrow keys)
    > Yes, use NPM
      Yes, use Yarn
      No, I will handle that myself

这里选择的是你创建的项目后使用什么运行项目，这里选择 NPM

这里需要创建的过程有些慢，需要等一会~

如果我们看到下面的内容说明创建成功了：  
![在这里插入图片描述][2020082219395485.png_pic_center]

## 三、启动vue项目 ##

回到webstorm，并打开你刚刚创建的vue项目，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 3]点击左下角的npm：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 4]此时如果你打开vue项目后，发现左下角没有npm的控件，你需要如下做：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 5]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 6]双击dev运行vue项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 7]点击地址：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 8]  
运行成功！！！

## 四、创建过程中可能会遇到的问题 ##

### 1. vue命令找不到 ###

报错内容如下：

bash: vue: command not found

原因：没有配置vue的环境变量  
解决：  
（1）找到node安装目录下的node\_global路径  
我的路径是这样的：E:\\MyWorkSpace\\node\\install\\node\_global  
（2）右击【我的电脑】->【属性】->【高级系统设置】->【环境变量】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70]  
（3）找到【系统变量】->【Path】点击【编辑】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 1]  
（4）添加node\_global路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 2]  
（5）重新打开git重试即可

### 2. vue-cli报错 ###

报错内容：

vue-cli · Failed to download repo vuejs-templates/easy-web: Response code 404 (Not Found)

原因：没有安装webpack  
解决：安装webpack 即可，安装命令（在git中执行下面的命令）：

npm install webpack -g

### 3.找不到webpack-cli/package.json模块 ###

原因：没有安装webpack-cli  
解决：安装webpack-cli即可，安装命令（在git中执行下面的命令）：

npm install webpack-cli -g

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200822191504338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200822191900636.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200822192458822.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70#pic_center
[2020082219395485.png_pic_center]: https://img-blog.csdnimg.cn/2020082219395485.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200822194153336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20200822194252903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20200822201115194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20200822201139369.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20200822201238393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20200822201316796.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210510224912448.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210510225003616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210510225232451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzg1MjUw,size_16,color_FFFFFF,t_70