IDEA中Vue的安装和使用（最全篇）

港控/mmm° 2022-02-23 00:06 613阅读 0赞

**一.准备工作**

Vue是前端开发框架。搭建框架，首先要搭建环境。搭建Vue的环境工具：node.js（JavaScript的运行环境），然后再用nodejs里面的npm（包管理和分发工具）来安装依赖包。

**二.安装node.js**

下载地址：[https://nodejs.org/zh-cn/][https_nodejs.org_zh-cn]

最好下载稳定版本：下载完之后（安装程序可以直接next step）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70][]

**三.检查是否安装成功**

打开CMD 输出下图代码，会显示版本信息。

![20190405151252434.png][]

**四.打开IDEA准备创建项目**

1.打开IDEA创建一个 Static Web 项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 1][]

2.打开Terminal

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 2][]

**五.正式创建项目**

1.首先安装npm的阿里镜像，原生npm下载依赖包过慢，镜像可以提高下载效率。

输入指令：输入后等待安装完成

npm i -g cnpm --registry=https://registry.npm.taobao.org

![20190405152231374.png][]

2.安装Vue的脚手架工具vue-cli

npm i -g vue-cli
    测试是否安装成功：
    vue -V    //注意：-V是大写的V，不是小写的v

安装中......

![20190405152413592.png][]

安装成功:

![20190405152458173.png][]

最后还剩下一个webpack工具（如果以前没有安装webpack，一定要安装！！！）

cnpm install -g webpack

![20190405155500932.png][]

**六.基本工具安装完成后，开始创建项目**

指令：vue init webpack 项目名

![20190405152635136.png][]

*基本安装回答可以照着我的输出：放心不坑人，只排坑。*

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 3][]

然后就是漫长的等待了。。。。。。

创建成功的项目的目录结构：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 4][]

**七.这里可还没有完，我们还少一个文件夹：nodo\_modules,这个文件夹是整个项目依赖包的文件夹。**

1.第一步：cd demo222进入demo222的项目（必须进入项目里才能安装啊!!）

![20190405154240251.png][]

2.第二步：cnpm install (此处可以用cnpm代替npm,因为安装了阿里的镜像)

//给大家排一个小坑，你安装了镜像后，有可能npm install可能会安装依赖包失败，所以最好用cnpm

.....等待中....

![20190405154340103.png][]

安装完依赖包的项目结构：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 5][]

**八.查看IDEA的Static Web里的Vue项目**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 6][]

**九.惊喜的时刻：运行Vue项目**

--运行Vue项目
    cnpm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 7][]

*运行成功展示：htttp://localhost:8080*

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 8][]

**十.下一步就是配置好IDEA的Vue环境了（配置好了，才能编写代码！）。加油！！**

1.在setting中的plugins安装Vue.js插件（本人已经安装）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 9][]

2.配置HTML支持.vue后缀的文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 10][]

3.配置ECMAScript6

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 11][]

***这里基本算是完了。恭喜你搭建成功！！！！***

***拓展：当然一般新手其实是在html页面上直接导入vue.js文件来写vue代码***

***楼主就稍稍拓展一下：***

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 12][]

[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70]: /images/20220223/9fc0909b257e4f7ea82a221053afa97c.png
[20190405151252434.png]: /images/20220223/b1df65b947a04c69a41b9a4b7114de1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 1]: /images/20220223/3daeb9e4d14b407abe23a24522f47af8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 2]: /images/20220223/0729a8788ca3464298eb72727f20ce2f.png
[20190405152231374.png]: /images/20220223/a85b4ad1d439470881cfdc59b323a8c0.png
[20190405152413592.png]: /images/20220223/49d8f6a62703439dac9e715cd8919223.png
[20190405152458173.png]: /images/20220223/4a18f9b544134654839c795acbbe3a40.png
[20190405155500932.png]: /images/20220223/7641108da63c4d0ab44379a05af6b093.png
[20190405152635136.png]: /images/20220223/9b522da236d0422eb1f29a3b6c0bab27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 3]: /images/20220223/677ba5124302442f89ef14a9084eb4be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 4]: /images/20220223/b90eb063ac304af58fedbdc0d4535a11.png
[20190405154240251.png]: /images/20220223/80feb738772c46a28a87e8af363a84b5.png
[20190405154340103.png]: /images/20220223/cc67887c6b72404ca3c50e80f47da219.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 5]: /images/20220223/5adc0b2d442a49be9792d8a5a8c6e90f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 6]: /images/20220223/a5fe40644d8343c0b3def175b371ec80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 7]: /images/20220223/449e4315776c47219a920eb2af8a7d8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 8]: /images/20220223/c1481d1334284325abb19dde4f7e4e8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 9]: /images/20220223/b7bd65600a6349678c7b0918daf9bd95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 10]: /images/20220223/43e24b13dfe4482b923bd96caea30dbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 11]: /images/20220223/8e77b5d4e4e345b990f0a626268a685d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDSUVKb2huX3pob3U_size_16_color_FFFFFF_t_70 12]: /images/20220223/d80d7f1fce844172b8248231a97bf300.png