Vue前端转Flutter一(环境配置)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue前端转Flutter一(环境配置)相关的知识,希望对你有一定的参考价值。

参考技术A

(*注:以下仅个人配置过程参考,系统win7-64)

所需软件
vsCode,android Studio, MuMu模拟器 (直连手机调试的话就不需要了)

配置过程
1、Flutter安装
安装时忘记截图,具体可参考链接 flutter中文网 相关教程+ 百度 ,现在网上教程很多,多踩点坑总会成功的。

2、MuMu模拟器调试时需进行相关配置
(*注:直连手机调试可忽略以下;执行以下操作需要在执行flutter doctor成功后,flutter run执行前)

(1)mumu模拟器端口监听,需要执行

(2)mumu模拟器调试flutter run可能会报错,可以改成,具体原因可直接百度“--enable-software-rendering”

3、如需调试ios端可尝试虚拟机+macOS+xCode
vmware+macOs可参考链接 VMware15安装MacOS系统 ,笔者按照该步骤已安装成功

前端(二十三)—— Vue环境搭建

一.Vue环境搭建

1.安装node

  • 官网下载node安装包
  • 傻瓜式安装
  • 万一安装后终端没有node环境,要进行node环境变量的配置(C:Program Files odejs)
  • 可以通过node提供的npm包管理器安装vue脚手架
  • 通过npm安装淘宝镜像cnpm,将nmp指令都修改为cnpm指令(npm install -g cnpm --registry=https://registry.npm.taobao.org)

2.安装全局vue脚手架

  • 起管理员终端(mac: sudo)
  • cnpm install -g @vue/cli
  • 如果安装失败,检测网络,请npm缓存(npm cache clean --force)后重新安装

3.创建项目

  • 采用可视化方式创建(vue ui)
  • 命令行
1.打开终端
2.去向目标目录(将项目创建在该目录)(cd 目标目录)
3.指令创建项目(vue creat 项目名)
4.选择自定义:Manually select features
5.用空格选取所需插件:Router, Vuex
6.采用Router的history...
7.在目标目录创建一个项目名的文件夹,该文件夹就是所创的项目

4.启动项目

1.进入项目目录
2.启动服务器(npm run serve)
3.退出服务器|刷新服务器(ctrl+c)
4.项目完成后,在项目目标下可以进行项目打包发布,要提前做配置(npm run build)

5.项目目录

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
    -- assets:资源
    -- components:组件
    -- views:视图组件
    -- App.vue:根组件
    -- main.js: 入口js
    -- router.js: 路由文件
    -- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)

6.项目开发

  • vue.config.js
module.exports={
    devServer: {
        port: 8888
    }
}
// 修改端口,选做
  • main.js
// 不用修改
// 采用之前的语法创建根实例
new Vue({
    el: "#app",
    router: router,
    store: store,
    render: function (h) {
        return h(App)
    }
})
  • *.vue
<template>
    <!-- 模板区域 -->
</template>
<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
    export default {
        
    }
</script>
<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

以上是关于Vue前端转Flutter一(环境配置)的主要内容,如果未能解决你的问题,请参考以下文章

VUE项目多环境配置.md

ruoyi-vue(若依前后端分离版本)环境搭建 用eclipse 安装redis 后端配置 配置node环境 前端配置

ruoyi-vue(若依前后端分离版本)环境搭建 用eclipse 安装redis 后端配置 配置node环境 前端配置

前端vue.js环境配置以及实例运行简明教程

Vue3 —— 使用Vite配置环境变量

Flutter 专题01 图解 Windows 环境下安装配置环境