idea中导入vue项目并运行

小咪咪 2023-02-12 09:29 53阅读 0赞

项目搭建  
安装vue-cli  
npl install vue-cli -g  
vue init webpack my-project  初始化项目  
npm install  安装项目依赖  -->>npm run build 生成上线目录部署  
nmp run dev  
在localhost启动测试服务器

# 一、idea打开vue项目卡死问题解决 #

file -> settings -> File Types -> ActionScript -> \*.as -> 给下面添加 node\_modules; 然后 apply -> ok

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tlcm1pdF9mYXRoZXI_size_16_color_FFFFFF_t_70][]

# 二、[nodejs安装][nodejs] #

# 三、[idea中导入vue项目并运行][idea_vue] #

1. 下载node.js

在搭建vue的开发环境之前，先下载node.js，下载地址：[https://nodejs.org/en/][https_nodejs.org_en]  
[https://blog.csdn.net/antma/article/details/86104068][https_blog.csdn.net_antma_article_details_86104068]

2. 安装

下载好后安装，傻瓜式点下一步直到finish即可  
[https://blog.csdn.net/antma/article/details/86104068][https_blog.csdn.net_antma_article_details_86104068]

3. 检测安装是否成功

安装成功后，一般不需要自己手动去配置环境变量，此时可以在命令行输入node -v 和 npm -v 分别查看node和npm的版本号；  
![format_png][]

4. 配置npm在安装全局模块时的路径和缓存cache的路径

在安装路径下新建两个文件夹，分别为：node\_global和node\_cache

*  ![format_png 1][]  
    然后在命令行中执行如下两个命令：（报错时是因为权限不足，需要使用管理员身份打开cmd再运行下面命令）
 *  npm config set prefix "C:\\Program Files\\nodejs\\node\_global"
 *  npm config set cache "C:\\Program Files\\nodejs\\node\_cache"  
    执行成功后：  
    [https://blog.csdn.net/antma/article/details/86104068][https_blog.csdn.net_antma_article_details_86104068]  
    然后在环境变量 -> 系统变量中新建一个变量名为 “NODE\_PATH”， 值为“D:\\Program Files\\nodejs\\node\_modules”，如下图：  
    ![format_png 2][]  
    最后编辑用户变量里的Path，将相应npm的路径改为：C:\\Program Files\\nodejs\\node\_global  
    ![format_png 3][]  
    配置完成！
    
    5. 测试
    
    在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效：  
    [https://blog.csdn.net/antma/article/details/86104068][https_blog.csdn.net_antma_article_details_86104068]  
    webpack 也已安装成功，执行 npm webpack -v 可以看到所安装webpack的版本号：  
    [https://blog.csdn.net/antma/article/details/86104068][https_blog.csdn.net_antma_article_details_86104068]
    
    6. 在idea中导入vue项目并运行
    
    setting-->plugins-->搜索vue-->选择第一个-->installed  
    ![format_png 4][]  
    ![format_png 5][]  
    导入vue项目  
    然后选择  
    ![format_png 6][]  
    package.json为当前项目目录下的package.json文件，scripts 选择 dev  
    ![format_png 7][]  
    继续添加npm  
    前面一样，scripts选择bulid  
    ![format_png 8][]  
    选择项目，点击  
    ![format_png 9][]  
    ![format_png 10][]

虽然会报 Opening index.html over file:// won't work.这个错误，但是好像没啥影响，在网上搜了一圈也没搞清楚啥原因  
点击![format_png 11][]  
输入 npm run dev  
![format_png 12][]  
运行结果

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tlcm1pdF9mYXRoZXI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200329155730890.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tlcm1pdF9mYXRoZXI=,size_16,color_FFFFFF,t_70
[nodejs]: https://blog.csdn.net/qq_16946803/article/details/104392027
[idea_vue]: https://www.cnblogs.com/guoguo327/p/11236004.html
[https_nodejs.org_en]: https://nodejs.org/en/
[https_blog.csdn.net_antma_article_details_86104068]: https://blog.csdn.net/antma/article/details/86104068
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5MjIwMDQxMS0xMjIzNjY3MzkyLnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5MjQxODExNy0xNjkwNjk3OTIxLnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5Mjc1NDY4Ny0xNzIyNjA2NjEyLnBuZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5Mjg0MzQ4NS0xMDk5MjkyNzcyLnBuZw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5MzQyMDQ0MC0xMjU0MTg1NjkwLnBuZw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5MzUxNTExMC0xNzA3NDYxOTU0LnBuZw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5MzY1MDMxNS0xMDUwNzg0MzIwLnBuZw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5MzgyNDcyNy01Nzc4Mjk1NzMucG5n?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5MzkzMzcyOS02MDIyNDEzNjkucG5n?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5NDAwOTAyMC0xNDY5MjQ4NTY2LnBuZw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5NDI0MDY2My00MDc1MTM3NjEucG5n?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5NDQwMTgwNi04MTgxNDYyNDQucG5n?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTcwMTEzOS8yMDE5MDcvMTcwMTEzOS0yMDE5MDcyNDA5NDQ0MjkzMS02NjA0NjQxMTMucG5n?x-oss-process=image/format,png