WebStorm项目--Vue.js入门

小灰灰 2022-11-21 11:26 208阅读 0赞

原文网址：[WebStorm项目--Vue.js入门\_IT利刃出鞘的博客-CSDN博客][WebStorm_--Vue.js_IT_-CSDN]

# 其他网址 #

> [使用webstorm创建vue项目\_我爱编程-CSDN博客][webstorm_vue_-CSDN]  
> [手把手一步步使用webStrom创建vue项目\_火星男孩的分享空间-CSDN博][webStrom_vue_-CSDN]

# 安装Node.js #

见：[Node.js--基础\_feiying0canglang的博客-CSDN博客][Node.js--_feiying0canglang_-CSDN]

# 安装Vue相关 #

**安装git**

> 傻瓜式安装

**使用默认配置时以下依赖可不安装**

# **法1：WebStorm创建** #

**其他网址**

> [在 WebStorm 中以 Vue.js 构建应用入门 | JetBrains Blog][WebStorm _ Vue.js _ _ JetBrains Blog]

**新建工程**

> File=> New=> Project
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]
> 
> **注意事项**
> 
> Location： 最后的项目名不能包含大写字母
> 
> Vue CLI：  
> 默认使用npm/bin下边的npx，使用npx --package @vue/cli vue，所以不需要手动下载vue-cli了。  
> @vue/cli内部已经有webpack，所以无需手动下载webpack。

**点击运行或者调试**

**查看网页**

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]

# 法2：手动创建（vue-cli2） #

**其他网址**

> 搭建环境与hello world · GitBook  
> [Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目 - Wise.Wrong - 博客园][Vue _ _ vue-cli _ - Wise.Wrong -]

**安装webpack/webpack-cli**

> npm install webpack webpack-cli -g

**安装vue/vue-cli**

> npm install vue vue-cli -g

**创建基于 webpack 模板的新项目**

> vue init webpack demo\_vue\_manual
> 
> vue命令用法：vue init <template-name> \[project-name\] //template-name可以是git上的，例如：vue init username/repo demo\_vue\_manual
> 
> 输出结果：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3][]
> 
> 可见，vue-cli帮我们生成demo\_vue\_manual下边的文件

**安装依赖**

> cd demo\_vue\_manual  
> npm install

**本地以默认端口来运行**

> npm run dev
> 
> 结果
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4][]

**网页查看**

> 打开 http://localhost:8080
> 
> 结果
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5][]

# 离线使用vue init #

**其他网址**

> [离线安装vue-cli webpack - 疯狗强尼 - 博客园][vue-cli webpack - _ -]

**简介**

> 直接使用vue init webpack demo\_vue时，会从github上边下载webpack模板，然后使用模板初始化项目。但是，有时会很慢，一直卡在“downloding template”。这时，可以将webpack模板通过其他方法先下载下来，然后离线使用vue init。

**方法**

> 1.下载webpack
> 
> 地址：[GitHub - vuejs-templates/webpack: A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.][GitHub - vuejs-templates_webpack_ A full-featured Webpack _ vue-loader setup with hot reload_ linting_ testing _ css extraction.]  
> //实在太慢则直接将此网址转到gitee 注意：转到gitee之后，发现没有发行版，但其实就是对应的tags。例如，github发行版是1.3.1，对应提交是c29ab6a，则到gitee中的“标签”里找到1.3.1，其提交版本也是c29ab6a，这两个就是一个文件，直接下载即可。
> 
> 2.将webpack放到指定位置
> 
> 在C:\\Users\\xxx\\.vue-templates\\下新建webpack文件夹，将webpack的内容拷贝进去，示例：
> 
> ![001573e4a158b57c8bcb64c19b298065.png][]
> 
> 3.离线使用vue init
> 
> vue init webpack demo\_vue --offline

[WebStorm_--Vue.js_IT_-CSDN]: https://knife.blog.csdn.net/article/details/109410006
[webstorm_vue_-CSDN]: https://blog.csdn.net/qiushisoftware/article/details/108794748
[webStrom_vue_-CSDN]: https://blog.csdn.net/sinat_31057219/article/details/84961664
[Node.js--_feiying0canglang_-CSDN]: https://blog.csdn.net/feiying0canglang/article/details/118585608
[WebStorm _ Vue.js _ _ JetBrains Blog]: https://blog.jetbrains.com/zh-hans/2019/06/17/webstorm-vue-js/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221120/673ef763024c4ca98b38093ab09ef995.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20221120/f069d92c61f04d689a8df21dab4d518c.png
[Vue _ _ vue-cli _ - Wise.Wrong -]: https://www.cnblogs.com/wisewrong/p/6255817.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: /images/20221120/2e96064ec82d4174b08babfcd6a80e26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3]: /images/20221120/1da0dd39fd5248d1ad06b0b66450e6af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4]: /images/20221120/b02fc3a0fb8c4f318e1c424031ac52b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5]: /images/20221120/f2a2739dd0dc402b924bf5884ccff0c4.png
[vue-cli webpack - _ -]: https://www.cnblogs.com/simon-xie/p/12508060.html
[GitHub - vuejs-templates_webpack_ A full-featured Webpack _ vue-loader setup with hot reload_ linting_ testing _ css extraction.]: https://github.com/vuejs-templates/webpack
[001573e4a158b57c8bcb64c19b298065.png]: https://img-blog.csdnimg.cn/img_convert/001573e4a158b57c8bcb64c19b298065.png