idea中启动vue项目

深碍√TFBOYSˉ_ 2023-10-03 19:44 56阅读 0赞

想使用vue必须先安装node.js : [Node.js下载][Node.js]

一、  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70]  
安装直接全部点击下一步最后完成安装  
二、

安装结束后打开cmd命令窗口  
输入以下命令验证是否安装成功,如出现版本号则安装成功

node -v
    npm -v

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 1]  
安装成功后,在cmd命令窗口使用如下命令安装npm的国内镜像cnmp

npm install -g cnpm --registry=http://registry.npm.taobao.org

三、

等待安装结束即可,安装完成之后,就可以用cnpm代替npm来安装依赖包  
cnmp安装结束后,在cmd命令窗口使用如下命令安装vue-cli构建工具

//老版本
    cnpm install -g vue-cli
    //新版本
    npm install -g @vue/cli
    
    //安装新版需先卸载旧版本
    npm uninstall vue-cli -g

四、

安装完运行环境和构建工具后,就开始使用vue-cli来构建项目  
使用cmd命令窗口cd到项目目录下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 2]  
4.1

在项目目录下使用如下命令初始化构建项目(初始化一个项目，项目名称是 permission-ui，其中webpack是构建工具)

//旧版本
    vue init webpack permission-ui
    //新版本
    vue create myvue

4.2

初始化时会让用户输入几个基本的选项，如项目名称、描述、作者等信息，直接回车默认就可以了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 3]  
等待项目初始化完成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 4]  
4.3

项目初始化完成后,在项目目录下使用如下命令安装项目所需依赖

cnpm install

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 5]  
4.4当项目依赖安装完成后,就可以使用如下命令启动项目,根据项目不同命令结尾不同,此项目为serve

npm run serve

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 6]  
4.5启动成功后,可用上图的路径访问项目了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 7]  
五、

5.1使用idea启动vue项目,在上面安装好node.js环境并初始化完成和安装好依赖的前提下,打开idea,然后在File–Settings–Plugins–Makerplace下找到vue.js插件,安装并重启idea  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 8]  
5.2 重启idea后,进行如下配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 10]  
5.3在Sctipts中根据项目选中,此处选serve  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 11]  
5.4在下图所示处找到安装node.js的目录并选择node.exe  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 12]  
5.5配置完成后,ok并启动项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 13]  
5.6启动成功,可以通过图中路径访问项目了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 14]

[Node.js]: https://nodejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191227153826452.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191227154930520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191227160049335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/201912271605106.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191227160653847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2019122716091381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191227161203576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191227161342124.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191227161854101.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191227162035902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191227162059520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191227162142341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20191227162309761.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20191227162401925.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20191227162507721.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTUxNzQ4,size_16,color_FFFFFF,t_70