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

  1. 全局安装 @vue/cli:
    npm install -g @vue/cli
  2. 创建项目:
    vue create hello-world-vue3


    选择:Default (Vue 3 Preview) ([Vue 3] babel, eslint)


     
  3. 运行项目:
     
    cd hello-world-vue3
    npm run serve





     
  4. 启动 vue ui:
    vue ui



     
  5. 添加路由及缓存:


    成功添加后:



    控制台日志:


    页面效果:




     
  6. 增加 vant:
    vant vue 3.0 网址:https://vant-contrib.gitee.io/vant/next/#/zh-CN/
    在项目根目录运行:
    npm i vant@next


    在 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>
    效果如图:


     
  7. 未完待续...
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页