vue入门002~vue项目的两种创建方式，学前端开发

[]( )一，使用命令行的方式创建vue项目

===============================================================================



*   1，桌面创建一个空文件夹，如vue0117  

    ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d4d26c596f414335a61675fb0bba4d79~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=IjOUGDXNSzOfsVq7plKqovCkoNY%3D)



进入这个文件夹，然后在顶部地址栏，输入cmd，然后回车键即可快速的打开dos命令行，并且定位到当前目录。  

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b3148abfa9144e138390f71a3b516349~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=%2BbEDRCLG3ueC8l6LsUxa4uRDJSg%3D)



*   2，然后执行下面命令行，安装vue-cli。

npm install -g vue-cli

等待安装  

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8ceb08595a674560b54795d8a5e41f40~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=Ffsg2viKsRclWOXFnHS5FLQaQoo%3D)



安装完成如下，这里显示vue-cli的版本号，即代表安装完成  

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2490280ae64e4303a175bf60bc705112~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=P1A75D3Q%2B0wqRyuTVYzwYP4Do00%3D)



*   3，使用webpack模板创建一个vue项目

vue init webpack my-project

如项目名为vue001  

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e95c3c3324b947328eddf7a69007d18f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=PhpFwNvB%2FLJb0LwroENORArj%2Bxw%3D)



在出现下面几个询问项时，直接按照箭头所示的操作即可  

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e95e171096f14f3a8d095da211d966d8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=SvV3yrAA8beCobtKP3XqxZA1eq0%3D)



下载项目所需类库  

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0e978bdba69b453b963092976dd09aa0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=BcjRZb%2F0miIJ2nnYEaV6tVUs9eg%3D)



项目创建完成后，如下  

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5d4a2aabfcb04cc6b172d1a1f46cad65~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=ln%2FaKfJ%2BFtBdBOFuv9BdYOuiENE%3D)



*   4，cd vue001进入项目目录  

    ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/223730e6bcb1496086497b916aa12f9a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=6nolfs5E%2B2BVWOcPNh4CWtPCmOM%3D)

    

*   5，执行 npm install 下载所需类库 下载中  

    ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b17092dc79174974bcdac04a14d9d197~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=MX1q0RmMG%2BanETE6jvdL2RyRWcc%3D)

    



下载完成  

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ea4a3728acdb4b32ad845768d322c7b0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=lkyUzVpKrHfJJDjwZ3cWi6FGyPI%3D)



*   6，使用webstorm打开项目，点击file，然后点击open  

    ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8b05c7d446894f1d9f6033148828bb87~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=PphQ7avVnBTp25qxqX22eNCnDQs%3D)



导入刚才创建的vue项目  

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d0f287833e054e89bd072fc63800f61d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=j0OOnqxga%2BYt5MIxtfhcbYwoP7E%3D)



*   7，运行项目  

    ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cc628a21462d476da5065dfda6fd5aaf~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=pLWB16QkIN2E9OyDyELvQjPHy%2BA%3D)



![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cacff9e9546241e882795ca757302885~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=mgOXiMDWL5h3ct0qTwhozZ9hAB8%3D)



项目运行成功后，在浏览器里打开下面链接  

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/91bc98e604354faf8cbdb31fa678ad4c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=XSJjJ9sy5Q%2FKi%2BKSFJDrg18VWcY%3D)



![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7e11226b753e4b93a2e6bf94daad3104~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=d1lntbyUZn3W28pBze1Unsjif4c%3D)



到这里就代表项目成功的创建并运行了。



[]( )二，使用webstorm一键创建vue项目

===================================================================================



*   1，点击file，然后new，然后点击project  

    ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2be5389bb41e49e49db958f6294cb947~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=GR%2BGwTCrnvNfa17%2F7oEmw%2BDeBTI%3D)

    

*   2，构建项目  

    ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2962a7f51cbb44f1961ce4873b4f41f9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=WpIZZv%2FwNqKjtIiqBX%2FA9tS8%2BOM%3D)

    



![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/30b81b672a98451bb9206d0edafeb949~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=s6M1A7Faq5fsDCwMuyAOUSZaWgg%3D)


### 最后

我可以将最近整理的前端面试题分享出来，其中包含**HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法**等等，还在持续整理更新中，希望大家都能找到心仪的工作。


**篇幅有限，仅展示部分截图：**

![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0d2fe77fa5684eb1ab83a26ec11cb0fa~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=nVQ1Dh9%2FFsDQspjctsmmcYAh6To%3D)

![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e91a2d78d2ba421b91d1664b8d1f055d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=rGvJ95sXZi5Ov0WzjGoxx02yvrk%3D)

![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/829831352d064dbe805ae58ac4e6f969~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771409163&x-signature=%2Fh47%2F4zp3QlRz9hpEhPf6BXL7is%3D)
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**