vue + ionic 搭建移动端项目

vue创建项目:

  • 找一个空文件夹,使用如下命令构建vue 项目:
     
    vue create app-web
    
    备注:app-web为项目的名字

     

  • 构建成功后,运行:npm run serve ,在浏览器中输入:locahost:8080 即可看到效果
  • 使用如下命令,安装ionic:
     
    npm install @ionic/vue @ionic/core --save
    
    备注: --save 保存在package.json中的dependencies中
          --save -dev 保存在package.json中的devDependencies中

     

  • 安装成功后,在package.json中就可以看到刚刚安装好的ionic及其版本号
  • 在【app-web】【src】【main.ts】中使用如下方式引入ionic:
     
    // main.ts
    
    import Ionic from '@ionic/vue';
    import '@ionic/core/css/ionic.bundle.css';
    
    Vue.use(Ionic);

     

  • 页面中直接使用即可:
     
    Primary
    Secondary
    Tertiary

     

  •  



  •  

  •  

     

     

     

你可能感兴趣的:(vue)