使用 @vue/cli 创建 Vue 3 项目

比眉伴天荒 2022-12-09 02:19 211阅读 0赞

1.  全局安装 @vue/cli：
    
        npm install -g @vue/cli
2.  创建项目：
    
        vue create hello-world-vue3
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70][]  
      
    选择：**Default (Vue 3 Preview) (\[Vue 3\] babel, eslint)**  
      
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 1][]  
     
3.  运行项目：  
     
    
        cd hello-world-vue3
        npm run serve
    
      
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 2][]  
      
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 3][]  
      
     
4.  启动 vue ui：
    
        vue ui
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 4][]  
      
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 5][]  
     
5.  添加路由及缓存：  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 6][]  
      
    成功添加后：  
      
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 7][]  
      
    控制台日志：  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 8][]  
      
    页面效果：  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 9][]  
      
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 10][]  
      
     
6.  增加 vant：  
    vant vue 3.0 网址：[https://vant-contrib.gitee.io/vant/next/\#/zh-CN/][https_vant-contrib.gitee.io_vant_next_zh-CN]  
    在项目根目录运行：
    
        npm i vant@next
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 11][]  
      
    在 main.js 增加：
    
        import Vant from 'vant'
        import 'vant/lib/index.css'
        
        createApp(App).use(store).use(router).use(Vant).mount('#app')
    
    在 App.vue 中增加：
    
        <van-button type="default">默认按钮</van-button>
    
    效果如图：  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 12][]  
      
     
7.  未完待续...

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70]: /images/20221123/688442320f624b37b1d29d865b4b7501.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 1]: /images/20221123/df0688e5fc3c4f2fafe743c1f4a404f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 2]: /images/20221123/b5eb3fb63e344144b7edf1abd55a38b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 3]: /images/20221123/7ec9d8b7274b4fefa6096ed17881ea11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 4]: /images/20221123/08c77e5c1a6e4600ae07ff9d07730c06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 5]: /images/20221123/4553fed841ff469897f65c675c768a3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 6]: /images/20221123/694b8daf21524ed6be0c0e85f6fa0108.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 7]: /images/20221123/d9180517a13b4d15be9d7d61350847ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 8]: /images/20221123/8c2ff9da53384dcb931175546c34dcd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 9]: /images/20221123/5063e563b0dc4e0489a56856532f2a70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 10]: /images/20221123/eb0226aa478940e8ba5fd317d546a34c.png
[https_vant-contrib.gitee.io_vant_next_zh-CN]: https://vant-contrib.gitee.io/vant/next/#/zh-CN/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 11]: /images/20221123/1d227a2465ac4f07b3440033324cf446.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 12]: /images/20221123/b4402fca8d0b43e2952cbb3d8bdbe8b9.png