VSCode搭建vue项目

我就是我 2022-08-31 01:51 266阅读 0赞

### 安装环境： ###

1.默认Vscode、nodejs已经安装好了

2.全局安装vue-cli，vue-cli帮助我们快速构建Vue项目。

npm install -g vue-cli

3.安装webpack (打包js的工具)

npm install -g webpack

### 建项目： ###

1.开始创建vue项目，首先创建一个文件夹用来存放项目，用vscode打开对应的文件夹，并在终端cd到对应的文件夹。比如我的文件夹就是VUE

注意：接下来的命令需要在cmd命令窗口，vscode默认是powershell，需要自己改一下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70][]

2.创建项目命令（myvue是项目父级目录名称）

vue init webpack myvue

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 1][]

接着会出现一些配置项，可以根据需要配置，也可以默认，直接按回车。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 2][] 默认的话myvue是项目名称，可根据喜好自己取。

3.接着运行项目，先cd到项目文件夹（默认是myvue），**cd myvue**，然后输入以下指令。（这部可能会报错，解决方法在文章最下方）

npm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 3][]

4.接着在浏览器里输入:http://localhost:8081（vscode给的链接，大家可能会有点不一样），看到如下vue页面就是成功啦。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 4][]

6.项目打包发布上线

npm run build

完成之后，项目文件夹中会出现一个dist文件夹，里面就是打包之后的内容，直接部署就好了。

**问题**：npm run dev时可能会报错（关于eslint校验的错误或警告，如下图）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 5][]

** 解决**：注释掉这一行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 6][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70]: /images/20220829/7bbfb0ca51dc46ef89b542f4c9d90ac9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 1]: /images/20220829/b68bc033e6c94977b0c3b96fa3e25c79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 2]: /images/20220829/4b1771125e8e4e55bea64c5f8118541d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 3]: /images/20220829/94a71de71f6f4fd0b65a28df0925708d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 4]: /images/20220829/a09d95095ecd4ff299a815aa9f4c520a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 5]: /images/20220829/2943d96aa18c49b4bd819caae39abbb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTg4MDAz_size_16_color_FFFFFF_t_70 6]: /images/20220829/90d73339a09840d2869e467c9255fece.png